Android原生方法和Web JS互相调用-两种写法

最新推荐文章于 2024-07-24 11:23:56 发布

黄毛火烧雪下

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量775

点赞数

分类专栏： Android 文章标签： android

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u010194271/article/details/106625811

版权

Android 专栏收录该内容

181 篇文章 15 订阅

订阅专栏

准备工作

两种写法

准备工作

准备一个html文件（htmltest.html），为了简化，直接放到项目的assets目录下调用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd">
<HTML>
<HEAD>
    <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"/>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
function showMsg(ids){
alert("hello world!"+ids);
}
function showMsgInAndroid(){
myjs.showMsg('hello in android!');
}

    </script>
</HEAD>
<BODY>
<span>测试js使用</span>

<button id='btntest' onclick='showMsgInAndroid()'>调用android方法</button>
</BODY>
</HTML>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/rl_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <WebView
        android:id="@+id/wv_test"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/btn_showmsg"/>
    <Button
        android:id="@+id/btn_showmsg"
        android:layout_width="200dip"
        android:layout_height="40dip"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="调用html中js方法"/>
</RelativeLayout>

两种写法

注意：开放给JavaScript调用的方法必须添加@JavascriptInterface注解，在 JELLY_BEAN/API 16/4.1开始必须添加，否则JavaScript无法调用到这个接口

public class NormalHtmlActivity extends BaseActivity {

    WebView wv_webview;
    private Button btnShowInfo;
    private AndroidtoJs js;
    private Handler mHandler = new Handler();

    @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_normal_web);
        wv_webview = findViewById(R.id.wv_test);
        btnShowInfo = (Button) findViewById(R.id.btn_showmsg);
        //实例化js对象
        js = new AndroidtoJs(this);
        //设置参数
        wv_webview.getSettings().setBuiltInZoomControls(true);
        //内容的渲染需要webviewChromClient去实现，设置webviewChromClient基类，解决js中alert不弹出的问题和其他内容渲染问题
        wv_webview.setWebChromeClient(new WebChromeClient());
        // 启用javascript
        wv_webview.getSettings().setJavaScriptEnabled(true);
       //第一种方式
        wv_webview.addJavascriptInterface(this, "myjs");
       // 第二种方式       
      //  wv_webview.addJavascriptInterface(js, "myjs");
      
        wv_webview.loadUrl("file:///android_asset/htmltest.html");
        btnShowInfo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        //调用 HTML 中的javaScript 函数
                        wv_webview.loadUrl("javascript:showMsg('原生调用JS')");
                    }
                });
            }
        });

    }

    //由于安全原因 需要加 @JavascriptInterface
    @JavascriptInterface
    public void showMsg(String msg) {
        Toast.makeText(NormalHtmlActivity.this, "JS调用HTML" + msg, Toast.LENGTH_SHORT).show();
    }

}

public class AndroidtoJs {

    private NormalHtmlActivity ma;

    public AndroidtoJs(NormalHtmlActivity context) {
        this.ma = context;
    }

    @JavascriptInterface
    public void showMsg(String msg) {
        Toast.makeText(ma, msg, Toast.LENGTH_SHORT).show();
    }

}

特别注意：

1.JS执行的代码不在Android的UI线程中，是在WebView Core的线程中，所以JS调用Android的接口中，需要添加到Activity.runOnUiThread中

2.JS调用Android方法，一定要一致，要么都带参数，要么都不传参数

3.Android 调用JS方法，需要在子线程中进行，比如使用Handler，见上面代码