Android代码与JavaScript的互调

WebView控件最重要的应用是与JavaScript的互调。在Android4.2之后与JavaScript的注入需要加入注解“@JavascriptInterface”。

一、Android端调用HTML中的JavaScript代码

Android端只需要在初始化WebView控件时，开启该控件对JavaScript的支持，然后先调用loadUrl()方法来加载HTML文件，接着再次调用该方法完成对JavaScript代码的调用。接下来举个例子，在一个名为test的HTML页面中定义一个JavaScript方法，具体代码如下：

fuction javaCallJs(){
    document.getElementById("content").innerHTML+="java调用了js函数";
}

在Android端初始化一个WebView控件并加载test.html文件，具体代码如下：

private void initWebView(){
    mWebView.getSettings().setJavaScriptEnabled(true); //启用了Javascript
    mWebView.load("file://android_asset/test.html"); //加载HTML文件
}

调用HTML页面中的javacallJs()方法，具体代码如下：

    mWebView.loadUrl("javascript:javaCallJs()");

二、Javascript调用Android端的代码

首先为WebView控件绑定一个JavascriptInterface类，JavaScript脚本通过该类对Java代码进行调用，定义一个JavascriptInterface类，具体代码如下：

public class TestInterface {
    /**
    * 因为安全问题，在Android4.2以后（应用的android：tragetSdkVersion数值为17+）
    * JS只能访问带有@JavascriptInterface注解的函数
    */
    @JavascriptInterface
    public void startFunction() {
            Toast.makeText(MainActivity.this,"Js调用了Java",Toast.LENGTH_SHORT).show();
        }
    }

在初始化WebView控件时需要绑定这个JavascriptInterface,具体代码如下：

//在代码中，TestInterface是实例化的对象，testInterface是这个对象在js中的别名
mWebView.addJavascriptInterface(new TestInterface(),"testInterface");

通过在绑定JavascriptInterface时设置的别名，可以使JavaScript调用Java代码，HTML中的具体代码如下：

    this is my html

    点击调用Java代码