前情:
Android控件WebView的自带的JavascriptInterface的接口,可以简单实现Java与js的交互,但是局限性很大。所以就出现了第三方库JSBridge。JSBridge实现了Java与javascript之间数据互通,Java调用js代码,js调用Java代码。
集成JSBridge库
可以查看该库的GitHub简述
集成方法两种:
- 在bulid.gradle中添加如下代码
repositories {
maven {url "https://jitpack.io"}
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
- 直接导入JSBridge的library包即可,从https://github.com/lzyzsd/JsBridge下载导入项目中的library
JSBridge使用
- javascript调用java,实现数据互通
**js代码**
window.WebViewJavascriptBridge.callHandler(
'Javajs'
, {'param': '中文测试'}
, function(responseData) {
document.getElementById("show").innerHTML = "得到来自Java回传的数据, data = " + responseData
}
);
**Java代码**
/**
* Html点击事件利用JS function方法调Android端并相互传值。
* bridgeWebView调用registerHandler实现Java与js互传数据
* "Javajs"是Java与js交互的handlerName,必须保持一致
*/
bridgeWebView.registerHandler("Javajs", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
//data是JavaScript返回的数据
Log.i(TAG, "得到JS传过来的数据 " + data);
//java返回给js的数据
function.onCallBack("Java数据");
}
});
2.java调用javascript代码,实现数据互通
**Java代码**
/**
* Android点击事件调用JS方法并相互传值。
* Java 调JS的functionJs方法并得到返回值
*/
bridgeWebView.callHandler("functionInJs", "来自Java数据", new CallBackFunction() {
@Override
public void onCallBack(String data) {
Log.i(TAG, data);
}
**javascript代码**
bridge.registerHandler("functionInJs", function(data, responseCallback) {
document.getElementById("show").innerHTML = ("data from Java: = " + data);
if (responseCallback) {
var responseData = "来自javascript数据";
responseCallback(responseData);
}
});
3.Java设置默认方式,接收js数据,不回传数据给js
**java代码**
/**
* You can set a default handler in Java, so that js can send message to Java without assigned handlerName
* DefaultHandler默认的方式,设置默认方式的话,js发送数据给Java不需要设置handlerName
* 默认方式有两种
* 1。DefaultHandler默认的方式
* 2。自定义实现
*/
//DefaultHandler默认的方式
bridgeWebView.setDefaultHandler(new DefaultHandler());
//自定义实现
bridgeWebView.setDefaultHandler(new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.i(TAG, "得到JS传过来的数据 " + data);
}
});
**javascript代码**
//send message to native
var data = {id: 1, content: "这是一个图片 <img src=\"a.png\"/> test\r\nhahaha"};
window.WebViewJavascriptBridge.send(
data
, function(responseData) {
document.getElementById("show").innerHTML = "发消息给java, data = " + responseData
}
);
4.javascript设置默认方式,接收Java数据,不回传数据给java
java代码
**Java 代码**
bridgeWebView.send("无返回值");
**javascript代码**
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': '测试中文!'
};
if (responseCallback) {
console.log('JS responding with', data);
responseCallback(data);
}
});