native（webView）和HTML交互
蓝侯林
最近我司项目中添加了一个新功能，因为新功能多个平台要实现公用（ios端、微信小程序、一些网站）因此新功能通过HTML实现，其中牵扯到了一些native（这里用的是Cordova的插件InAppBrowser）和HTML交互的逻辑，特在此记录。
一、 html调用native原生方法：
html：
<html>
<head></head>
<body>
<button type="file" style="height:100px;width:200px;" onclick="sign()">test</button>
<script type="text/javascript">
<!--传给native的参数-->
var sign= function (){
var aaa={
"sn":"1111111111",
"password":"123456",
"data":{
"hashData":"4sf4dfgsdhg4fhg",
"toBeSign":""
}
};
var str=JSON.stringify(aaa);
<!--js调用native方法-->
window.AndroidNative.jsCallJava(str);
};
<!--native调用js中的方法-->
var javaCallJavascript= function (param) {
alert(param);
};
</script>
</body>
</html>
二、Java（native）
webview类中
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);//如果html页面中有Javascript，则webview必须设置支持Javascript//添加JavaScript接口实例，
//参数一：具体实现js端需要调用的方法；
//参数二：js端实际调用的‘类名’，参数一在js端的代理名
mWebView.addJavascriptInterface(new NativeInterface(new NativeInterface.IJavaCallJsListener() {
@Override
public void listnter(final String str) {
//webview.loadUrl要在UI线程中执行
cordova.getActivity().runOnUiThread(new Runnable() {
@SuppressLint("NewApi")
@Override
public void run() {
//javaCallJavascript为native调用js端的方法名，此方法必须是JavaScript和HTML写在一起，否则js端方法不会被调用（测试期间发现），经测试参数为json字符串时JS端的方法不会被调用，转化为base64后可以正常调用。
mWebView.loadUrl("javascript:javaCallJavascript"( \"" + str + "\")");
}
});
}
}),"AndroidNative")三、js实际调用的类
public class NativeInterface {
private IJavaCallJsListener listnter;
public NativeInterface( IJavaCallJsListener listener) {
this.listnter = listener;
}
//如果需要处理耗时操作可采用如下方法，如果非耗时操作可将结果直接返回，js端等号接收（var result=window.AndroidNative.jsCallJava(str);）
@JavascriptInterface
public void jsCallJava(String params) {
this.listnter.listnter("异步的处理结果");
}
//用户异步操作的回调
public interface IJavaCallJsListener {
void listnter(String callMode,String str);
}
}
类似资料：