Android与js页面交互实例介绍

最新推荐文章于 2015-12-22 11:20:45 发布

fanxl12

最新推荐文章于 2015-12-22 11:20:45 发布

阅读量672

点赞数

分类专栏： android学习文章标签： android js 实例 js交互

本文链接：https://blog.csdn.net/fanxl10/article/details/41309849

版权

android学习专栏收录该内容

32 篇文章 1 订阅

订阅专栏

Android与JS交互，分为android调用js页面，js页面调用android这两种情况，下面具体说下怎么实现。

首先是Html页面代码：

<html>
<head>
<metahttp-equiv="Content-Type"        content="text/html;charset=gb2312">
 
<scripttype="text/javascript">
 
function javaTojs(){
 document.getElementById("content").innerHTML+=  
         "<br\>java调用了js函数";
}
 
functionjavaTojsWithParam(str){
 document.getElementById("content").innerHTML+=  
         ("<br\>"+str);
}
 
</script>
</head>
<body>
this is my html<br/>
<a onClick="window.fxl.testFunction()">点击调用java代码</a><br/>
<a onClick="window.fxl.testFunction('hello world')">点击调用java代码并传递参数</a>
<br/>
<div id="content">内容显示</div>
</body>
</html>

上面Html代码中，有两个页面JS方法分别是javaTojs()无参的，和 javaTojsWithParam(str)有参的，这个是供android代码来调用，从而实现android调用js；

另外页面上有两个方法，testFunction()无参的和testFunction('hello world')有参的，注意这个时候的写法必须是window.加别名.加方法名，别名是供android来识别的，注册的时候会填写；

下面是android代码了：

为了方便测试，我们把这个html页面放入工程里面的assets文件夹下面，

然后activity页面布局如下：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
    android:orientation="vertical"
   tools:context="${relativePackage}.${activityClass}" >
 
    <WebView
        android:id="@+id/main_wv"
       android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="6"/>
 
    <LinearLayout
       android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="4"
       android:orientation="vertical" >
 
 
        <Button
            android:id="@+id/main_bt"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
            android:text="java调用JS" />
       
        <TextView
            android:id="@+id/main_tv"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content" />
    </LinearLayout>
       
 
</LinearLayout>

然后代码：

packagecom.fanxl.androidjs;
 
importandroid.annotation.SuppressLint;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.webkit.JavascriptInterface;
importandroid.webkit.WebView;
importandroid.widget.Button;
importandroid.widget.TextView;
importandroid.widget.Toast;
 
public classMainActivity extends Activity {
 
 
privateWebView main_wv;
privateTextView main_tv;
privateButton main_bt;
 
 
    @Override
    protected void onCreate(BundlesavedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
 
@SuppressLint({"SetJavaScriptEnabled", "JavascriptInterface" }) privatevoid initView() {
main_wv= (WebView) findViewById(R.id.main_wv);
main_tv= (TextView) findViewById(R.id.main_tv);
main_bt= (Button) findViewById(R.id.main_bt);
//点击android按钮调用js网页上的方法，实现android调用js
main_bt.setOnClickListener(newOnClickListener() {
 
@Override
publicvoid onClick(View v) {
//调用网页上的无参JS函数
main_wv.loadUrl("javascript:javaTojs()");
//调用网页上的有参JS函数
main_wv.loadUrl("javascript:javaTojsWithParam("+"'我写的内容是什么呢？'"+")");
}
});
//设置支持JS
main_wv.getSettings().setJavaScriptEnabled(true);
//加载HTML网页
main_wv.loadUrl("file:///android_asset/fxl.html");
//增加JS接口，相应js页面的方法，实现js调用android
main_wv.addJavascriptInterface(newObject(){
 
//此时注意，如果是4.2及以上版本，需要添加@JavascriptInterface，不然是不相应的
//4.2以下可以不写这个，这个主要是Google为了增加安全性所加的一个标签，所有要被页面所相应的android方法都需要加
@JavascriptInterface
publicvoid testFunction(){ 
Toast.makeText(MainActivity.this, "js调用了java函数", Toast.LENGTH_SHORT).show();
runOnUiThread(newRunnable() {
 
@Override
publicvoid run() {
main_tv.setText("网页的JS无参方法被调用了");
}
});
}
 
 
@JavascriptInterface
publicvoid testFunction(final String str){
Toast.makeText(MainActivity.this, "js调用了java函数"+str, Toast.LENGTH_SHORT).show();
runOnUiThread(newRunnable() {
 
@Override
publicvoid run() {
main_tv.setText("网页的JS有方法被调用了---"+"参数："+str);
}
});
}
 
}, "fxl"); //这里的名称就是在页面window.fxl.testFunction()所取的别名
}
}

代码写的很详细，就不再过多的讲述了，只需要注意4.2以上版本，需要在相应页面JS方法上面加

@JavascriptInterface标示符

实例demo下载：

http://download.csdn.net/detail/fanxl10/8178873

fanxl12

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android与js页面交互实例介绍

Android与JS交互，分为android调用js页面，js页面调用android这两种情况，下面具体说下怎么实现。首先是Html页面代码： function javaTojs(){ document.getElementById("content").innerHTML+= "java调用了js函数";}
复制链接

扫一扫

专栏目录