Android开发中webView与HTML+JS的交互

Android与HTML+JS的交互

在Android开发中，越来越多的商业项目使用了Android原生控件与WebView进行混合开发，当然不仅仅就是显示一个WebView那么简单，有时候还需要本地JAVA代码与HTML中的javascript进行交互，Android也对交互做了很好的封装，所以很容易就可以实现，例如：点击网页中的按钮让Android调用原生对话框，点击网页中的电话号码调用Android拨号。接下来就给大家分享一下如何实现Android与HTML+JS的交互。

本篇主要实现的功能点：

Android调用HTML中的javascript脚本

HTML中的javascript脚本调用Android本地代码

Android调用HTML中的javascript脚本并传递参数

HTML中的javascript脚本调用Android本地方法并传递参数

实现Android调用JS脚本其实是非常简单的，直接使用WebView调用loadUrl方法，里面是JS的方法名，并可以传入参数，javascript：xxx()方法名需要与JS中的方法名相同

contentWebView.loadUrl(“javascript:javacalljs()”);

HTML代码：

function javacallJs(){
document.getElementById(“content”).innerHTML=”JAVA调用了JS的无参函数”;
}
function javacallJs(arg){
document.getElementById(“content”).innerHTML=arg;
}

实现JS调用Android方法，需要在Java代码中添加下面这句，webView绑定javascriptInterface，js脚本通过这个接口来调用java代码，第一个参数是自定义类对象，映射成JS对象，这里我直接传this，第二个参数是别名，JS脚本通过这个别名来调用java的方法，这个别名跟HTML代码中也是对应的。

contentWebView.addJavascriptInterface(MainActivity.this,”android”);

HTML代码

< input type=”button” value=”点击调用java代码” οnclick=”window.android.startFunction()”>
< input type=”button” value=”点击调用java代码并传递参数” οnclick=”window.android.startFunction(“http://www.baidu.com“)”>

MainActivity中的主要设置

//启用javascript

contentWebView.getSettings().setJavaScriptEnable(true);

contentWebView.addJavascriptInterface(MainActivity.this,”android”);

@JavascriptInterface
public void startFunction(){
    runOnUiThread(new Runnable()){
        @Override
        public void run(){
            Toast.makeText(MainActivity.this,"show",3000).show();
        }
    }
}

@JavascriptInterface
public void startFunction(final String text){
    runOnUiThread(new Runnable()){
        @Override
        public void run(){
            Toast.makeText(MainActivity.this,text,3000).show();
        }
    }
}