JS 和 Native 互相调用方式

一、网页JS调用Native中java代码

 

网页和本地代码的交互主要是通过webview这个桥梁来进行的，webview中的如下接口：

 

接口中的第一个参数object, 为注入webview的java对象

第二个参数name， 为暴露给javaScript使用的名字。

 

即通过该接口给webview注入一个object对象，然后javaScript可以通过name来引用object对象。

 

Webview的设置如下，打开javaScript功能，加载本地网页，注入对象：

// 启用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
mWebView.loadUrl("file:///android_asset/wx.html");
mWebView.addJavascriptInterface(this, "wx");

 

native本地定义的java接口：

 

分别定义了带有参数和不带参数的两个接口，当JS调用的时候，本地会弹出Toast显示文本，并且更新native界面中的textview内容。

 

网页端调用Native端代码方式如下：

 

调用方式主要是通过window来引用webview中注入的对象。

 

需要注意的是在Android4.2之前addJavascriptInterface接口存在注入漏洞，即JS可以通过反射获取到native端的其他接口，进行其他非法操作，所以4.2之后升级增加了JS只能访问带有 @JavascriptInterface注解的Java函数的限制，在本地定义的提供给JS调用的接口都需要增加@android.webkit.JavascriptInterface声明。

效果图：

 

 

 

二、Native端java调用网页JS方法

网页JS端提供给Java端的代码定义如下,主要用来改变标签内容：

 

 

Java端的调用方法如下：

 

Webview对象通过loadUrl接口来加载以javascript协议头的方式就可以调用JS中定义的接口了。

 效果图：