WebView与Js交互-JsBridge的使用
目录
- 前言
- github地址
- 功能
- 使用方法
- 添加依赖
- 推荐方式
- 简单封装JS库文件
- 判断手机类型
- 设置Android手机桥接
- 设置IOS手机桥接
- 设置Android和IOS统一桥接口
- JS调用函数
- JS库文件整体代码
- Html页面设置
- Android端使用（这里省略IOS，用法基本相同）
- xml布局设置
- Java代码（客户端调用）
- 注册webview监听
- Java主动调用Js函数
- 测试截图
- 源码分析
- 客户端
- H5
- Native调用JS
- Js调用Native
前言
在WebView的开发中，经常需要用到本地函数与H5界面或者Js交互，传递数据等，但是都知道Android本身自带的WebView与Js交互方式通过addJavascriptInterface这种桥接方式存在安全隐患问题，这个可以网上查一大堆，这里提供一种可行的方式进行交互，方便Android与IOS同时使用–WebViewJavascriptBridge。
github地址
https://github.com/lzyzsd/JsBridge
功能
- Js调用Android（IOS）本地方法（获取回调）；
- Android（IOS）本地调用Html函数；
- Android（IOS）本地调用Html函数并获取回调；
使用方法
添加依赖
repositories {
// ...
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
这里需要注意的一个坑：不建议直接添加github依赖，1.0.4版本存在很多问题，会在使用中出现不稳定情况，例如js无法获取Android（IOS）的回调值等。
推荐方式
直接将该库中的library clone下来，作为Module导入并依赖。
简单封装JS库文件
为了使Android和IOS同时使用，方便开发时Html界面调用，这里抽出一个JS库，统一Android和IOS的调用方式。
以下代码都是js文件中的（NativeApp.js）
判断手机类型
/**
* 获取系统类型 （根据userAgent判断）
* IOS 苹果
* ANDROID 安卓
* UNKOWN 未知
*/
getOSType : function(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid){
return 'ANDROID';
}else if(isiOS){
return 'IOS';
}else{
return 'UNKOWN';
}
}
设置Android手机桥接
Android在使用该库时需要初始化配置，这段代码必须设置在Js中。
/**
* android系统js桥接口设置
* @param {Object} callback 桥接口回调函数 桥接方式固定写法
*/
setUpAndroidBridge: function (callback) {
if(window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function() {
return callback(WebViewJavascriptBridge);
},
false
);
}
}
设置IOS手机桥接
IOS在使用时配置该库的代码如下：
/**
* IOS系统js桥接口设置
* @param {Object} callback 桥接口回调函数 桥接方式固定写法
*/
setUpIOSBridge : function (callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
设置Android和IOS统一桥接口
为了方便Html端的调用，在JS文件中，将Android和IOS的桥接口统一设置。
/**
* Android和IOS 统一桥接口
*
* data 请求参数封装
* 如 var data = {
* 'action': 'closeWebViewPage',
* 'data':'关闭当前webView视图'
*
* };
*
* callback 结果返回值回调
* 如 var callbackFun = function(resultdata){
* //resultdata 为具体返回值封装
* }
*
*
*/
setUpBridge:function(data,resultCallback){
var osType = this.getOSType();//获取系统类型
//按系统类型 分别执行原生交互
if(osType=='IOS') {
//苹果手机交互方式 消息体为字面量对象(json格式)： action 代表执行的动作 data 代表传递的数据
this.setUpIOSBridge(function(bridge) {
bridge.callHandler('IOSNativeApp',data, function(response) {
if(typeof resultCallback == 'function') {
resultCallback(response);
}
});
});
} else if(osType == 'ANDROID') {
//安卓手机交互方式
this.setUpAndroidBridge(function(bridge) {
bridge.callHandler('AndroidNativeApp', data, function(response) {
if(typeof resultCallback == 'function') {
resultCallback(response);
}
});
});
}else {
//其他类型
}
}
JS调用函数
在Js中设置两个函数，分别实现不同的功能（一个是关闭本地界面，一个是回传用户信息），为了方便在Html中调用，这里在JS中设置了两个方法，可以根据自己的实际情况封装，这里只是为了演示。
关闭（返回）界面：
/**
* 关闭当前WebView视图页面，并返回上一级原生界面
*/
closeWebViewPage : function() {
var data = {
'action': 'closeWebViewPage',
'data':'关闭当前webView视图'
};
this.setUpBridge(data,null);
}
获取当前登录用户：
/**
* 获取当前用户信息
* resultCallback 为一个回调处理函数，函数参数为返回值
* 如
* var resultCallback = function(resultData){
*
* }
*
*/
getCurrentUserInfo :function(resultCallback) {
var data = {
'action': 'getCurrentUserInfo',
'data':'获取用户信息'
};
this.setUpBridge(data,resultCallback);
}
JS库文件整体代码
var NativeApp = {
closeWebViewPage : function() {...}
getCurrentUserInfo :function(resultCallback) {...}
getOSType : function(){...}
setUpBridge:function(data,resultCallback){...}
setUpIOSBridge : function (callback) {...}
setUpAndroidBridge: function (callback) {...}
}
Html页面设置
这里需要将定义好的Js库引入使用，这里设置了两个点击按钮用于调用java本地方法（一个关闭界面，一个获取用户数据），并定义两个用于显示内容的标签（一个显示java主动调用带的参数，一个用于显示主动获取的java数据）。
测试WebViewJsBridge
data
data
Html这里调用的时候需要注意的是，我这里是通过两个点击按钮去主动触发的JS调用本地方法，这里没法在Js中直接使用（即在Js中直接NativeApp.closeWebViewPage()）,但是可以通过settimeout来触发：
setTimeout(function(){
console.log("setTimeout--->");
NativeApp.getCurrentUserInfo(resultCallBack);
},500);
Android端使用（这里省略IOS，用法基本相同）
xml布局设置
使用该库时，需要将原生的webView控件改为BridgeWebView。为了方便演示，下面多加几个点击控件和显示控件。
Java代码（客户端调用）
注册webview监听
给WebView注册监听，当Html页面调用java本地函数时，会响应。这里第一个参数为本地java代码与Js端的约定协议内容，即Js指定要调用的java函数，第二个参数为回调，即java收到Js的调用之后做的回调，这里我将两个合在一起处理了。
mBridgeWebView.loadUrl("file:///android_asset/new_file.html");
mBridgeWebView.registerHandler("AndroidNativeApp", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.e(TAG, "指定Handler接收来自web的数据：" + data);
try {
JSONObject jsonObject = new JSONObject(data);
String action = jsonObject.get("action").toString();
String data1 = jsonObject.getString("data");
Log.e("tag", "action-- : " + action);
Log.e("tag", "data -- : " + data1);
if(action.equals("closeWebViewPage")) {
finish();
} else if(action.equals("getCurrentUserInfo")) {
function.onCallBack(userName);
} else {
}
} catch (JSONException e) {
e.printStackTrace();
}
}
});
Java主动调用Js函数
java主动调用Js，Js给出回调返回值
this.button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String data = "data from native";
mBridgeWebView.callHandler("functionInJs", data, new CallBackFunction() {
@Override
public void onCallBack(String data) {
textView.setText("Native接收到Js返回参数：" + data);
}
});
}
});
java主动调用Js，不需要获取返回值
this.button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String data = "data from native";
mBridgeWebView.callHandler("functionInJs_2", data, null);
}
});
测试截图
- Js调用Android本地方法，不需要获取返回值
- Js调用Android本地方法，并获取返回值
- Android本地调用Js方法，不需要返回值
- Android本地调用Js方法，并获取返回值
源码分析
客户端
在BridgeWebView的初始化方法中，添加了自定义的BridgeWebViewClient，在onPageFinished方法中，去加载WebViewJavascriptBridge.js文件（在assets目录下）：
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (BridgeWebView.toLoadJs != null) {
BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
}
...
}
BridgeUtil # webViewLoadLocalJs：
public static void webViewLoadLocalJs(WebView view, String path){
String jsContent = assetFile2Str(view.getContext(), path);
view.loadUrl("javascript:" + jsContent);
}
H5
var doc = document;
_createQueueReadyIframe(doc);
var readyEvent = doc.createEvent('Events');
readyEvent.initEvent('WebViewJavascriptBridgeReady');
readyEvent.bridge = WebViewJavascriptBridge;
doc.dispatchEvent(readyEvent);
H5端在使用的时候需要检测是否初始化完毕：
if(window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function() {
return callback(WebViewJavascriptBridge);
},
false
);
}
Native调用JS
jsBridgeWebview.callHandler(String handlerName, String data, CallBackFunction callBack);
public interface CallBackFunction {
public void onCallBack(String data);
}
callHandler方法中调用doSend方法（参数：方法名； 数据； 回调）：
private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
Message m = new Message();
if (!TextUtils.isEmpty(data)) {
m.setData(data);
}
if (responseCallback != null) {
String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
responseCallbacks.put(callbackStr, responseCallback);
m.setCallbackId(callbackStr);
}
if (!TextUtils.isEmpty(handlerName)) {
m.setHandlerName(handlerName);
}
queueMessage(m);
}
doSend方法中，将参数封装到Message对象中（注意这个Message不是Android SDK中的Message，是该开源库自己封装的Message）；
方法名和数据判空后放入Message对象，单独看下回调：
生成每个callBack唯一对应的id（其实就是一个固定格式的字符串，用于存储在Map中的key值）：
String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
格式：“JAVA_CB_%s” + uniqueId + “_” + 当前时间毫秒值；uniqueId：一个自增的int类型值，默认值为0；
然后将其放入消息队列中（List）：
private void queueMessage(Message m) {
if (startupMessage != null) {
startupMessage.add(m);
} else {
dispatchMessage(m);
}
}
走到这里会看到，startupMessage在直接声明的时候就初始化了，怎么会为空？翻到BridgeWebViewClient类中的onPageFinished方法：
@Override
public void onPageFinished(WebView view, String url) {
...
if (webView.getStartupMessage() != null) {
for (Message m : webView.getStartupMessage()) {
webView.dispatchMessage(m);
}
webView.setStartupMessage(null);
}
}
这里可以看到，webview内容加载完之后，会遍历这个startupMessage队列，去调用BridgeWebView中的dispatchMessage方法，将Message作为参数，并且将startupMessage队列置为null；
dispatchMessage方法：
void dispatchMessage(Message m) {
String messageJson = m.toJson();
//escape special characters for json string
messageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");
messageJson = messageJson.replaceAll("(?<=[^\\\\])(\")", "\\\\\"");
String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
this.loadUrl(javascriptCommand);
}
}
将Message对象转为Json并做一些处理，最终转为js命令：
“javascript:WebViewJavascriptBridge._handleMessageFromNative(’%s’);”，参数为json；
最终在java主线程中调用loadUrl方法，去执行WebViewJavascriptBridge.js中的方法_handleMessageFromNative；
WebViewJavascriptBridge.js
//提供给native调用,receiveMessageQueue 在会在页面加载完后赋值为null,所以
function _handleMessageFromNative(messageJSON) {
console.log(messageJSON);
if (receiveMessageQueue && receiveMessageQueue.length > 0) {
receiveMessageQueue.push(messageJSON);
} else {
_dispatchMessageFromNative(messageJSON);
}
}
在webview加载完js，即onPageFinished方法后，receiveMessageQueue被置为null，所以这里直接执行了_dispatchMessageFromNative方法；
//提供给native使用,
function _dispatchMessageFromNative(messageJSON) {
setTimeout(function() {
var message = JSON.parse(messageJSON);
var responseCallback;
//java call finished, now need to call js callback function
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
} else {
//直接发送
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({
responseId: callbackResponseId,
responseData: responseData
});
};
}
var handler = WebViewJavascriptBridge._messageHandler;
if (message.handlerName) {
handler = messageHandlers[message.handlerName];
}
//查找指定handler
try {
handler(message.data, responseCallback);
} catch (exception) {
if (typeof console != 'undefined') {
console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
}
}
}
});
}
（若responseId不为空，意味着js调用Native并且js有回调，这里表明Native将js回调需要的数据传过来了，从回调函数队列里根据responseId取出回调函数，如果该函数不为空，执行该回调函数，并移除回调函数队列里的该回调函数；）
该方法中，首先将json参数转为Message对象；
Native调用Js时没有responseId，所以直接跳转到else分支，判断callbackId，即Native是否需要js返回数据，如果需要，则初始化一个回调函数，里面调用_doSend方法，将responseId和responseData封装到message中，放入消息队列里；
从messageHandlers中通过handlerName匹配对应的handler（即在Js注册的时候设置的）；执行该方法，参数为message中的data，即native中传递的data，以及上面初始化的回调函数；
这里结合H5注册接口说一下：
WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
...
responseCallback(responseData); // 为Native返回数据
});
WebViewJavascriptBridge.js #
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler;
}
可以看到这里在H5页面中注册的供Native调用的方法被添加到messageHandlers队列中，key值为方法名；所以上面取出的handler即为该注册的方法中定义的回调方法；其中data为Java端传来的data，responseCallback为上面初始化的function：
responseCallback = function(responseData) {
_doSend({
responseId: callbackResponseId,
responseData: responseData
});
};
再看一下_doSend方法：
//sendMessage add message, 触发native处理 sendMessage
function _doSend(message, responseCallback) {
...
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
将message对象存入sendMessageQueue队列，改变iframe的src属性，触发Java端WebViewClient的shouldOverrideUrlLoading方法执行；
src=”yy://__QUEUE_MESSAGE__/”;
其实这里是相当于Js跟Webview定义了一个协议，协议为该src，当webview拦截url时，如果是这个已经定义好的协议，则做相应的处理；
回到BridgeWebViewClient类的shouldOverrideUrlLoading方法中:
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
...
if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回数据
webView.handlerReturnData(url);
return true;
} else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //
webView.flushMessageQueue();
return true;
} else {
return super.shouldOverrideUrlLoading(view, url);
}
}
拦截1：url是以"yy://return/"开头的，调用BridgeWebView的handlerReturnData方法，这时是js为Native端返回数据；
拦截2：url是以"yy://"开头的，调用BridgeWebView的flushMessageQueue方法，去刷新消息队列；
这里由于url是满足第二条，所以先看flushMessageQueue方法：
BridgeWebView#flushMessageQueue：
void flushMessageQueue() {
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
public void onCallBack(String data) {
...
}
});
}
}
该方法要在主线程执行，调用loadUrl方法：
private void loadUrl(String jsUrl, CallBackFunction returnCallback) {
this.loadUrl(jsUrl);
responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback);
}
JS_FETCH_QUEUE_FROM_JAVA = "javascript:WebViewJavascriptBridge._fetchQueue();"
即调用Js的_fetchQueue方法，将创建的回调对象，以_fetchQueue为key值存入responseCallbacks中；
触发Js的_fetchQueue方法去返回数据，在Native去根据回调解析数据做出相应的处理；
WebViewJavascriptBridge.js # _fetchQueue：
// 提供给native调用,该函数作用:获取sendMessageQueue返回给native,由于android不能直接获取返回的内容,所以使用url shouldOverrideUrlLoading 的方式返回内容
function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
//android can't read directly the return data, so we can reload iframe src to communicate with java
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}
在该方法中，首先将js需要回传给Native的所有数据sendMessageQueue转为json，然后触发Native拦截url处理消息，url = “yy://return/_fetchQueue/returncontent”；
这里拦截到该url，执行handlerReturnData方法：
BridgeWebView # handlerReturnData：
void handlerReturnData(String url) {
String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
CallBackFunction f = responseCallbacks.get(functionName);
String data = BridgeUtil.getDataFromReturnUrl(url);
if (f != null) {
f.onCallBack(data);
responseCallbacks.remove(functionName);
return;
}
}
从url中获取js传来的方法名以及Js传来的值，从responseCallbacks队列中根据方法名取出回调函数接口对象（该回调对象是在上面存入的key值为_fetchQueue的回调对象），如果回调接口对象不为空，则调用其onCallBack函数将js传来的数据返回给Native端，将该回调函数对象从responseCallbacks队列中移除；
这里的回调即flushMessageQueue方法中在loadUrl中设置的回调函数：
loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
public void onCallBack(String data) {
// deserializeMessage
List list = null;
try {
list = Message.toArrayList(data);
} catch (Exception e) {
...
}
... // 判空
for (int i = 0; i < list.size(); i++) {
Message m = list.get(i);
String responseId = m.getResponseId();
// 是否是response
if (!TextUtils.isEmpty(responseId)) {
CallBackFunction function = responseCallbacks.get(responseId);
String responseData = m.getResponseData();
function.onCallBack(responseData);
responseCallbacks.remove(responseId);
} else {
...
}
}
}
});
由于这里是在js _fetchQueue方法中将整个消息队列都返回来了，所以需要遍历Message集合，找到对应需要的那一条；取出responseId，我们要取的消息是带有responseId的（Native调用了js并需要回调），这个responseId其实就是一开始java需要回调时生成的callbackId，根据这个callbackId从responseCallbacks取出最开始存入的回调对象 并且执行该回调方法，在Native端拿到数据并做相应的处理；
Js调用Native
Native为Js注册调用接口：
mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, final CallBackFunction function) {
...
}
});
BridgeWebView # registerHandler：
public void registerHandler(String handlerName, BridgeHandler handler) {
if (handler != null) {
messageHandlers.put(handlerName, handler);
}
}
注册供Js调用的接口方法，并设置回调，如果回调不为空，将回调方法放入messageHandlers队列中，key值为定义的方法名；
Js调用接口：
WebViewJavascriptBridge.callHandler('submitFromWeb', data, function(responseData) {
...
});
WebViewJavascriptBridge.js中：
function callHandler(handlerName, data, responseCallback) {
_doSend({
handlerName: handlerName,
data: data
}, responseCallback);
}
返回到WebViewJavascriptBridge # _doSend方法中，将Js端的responseCallback回调函数放入responseCallbacks队列中，key值为生成的唯一标识callbackId，并为message对象设置callbackId，触发Native端去重载url并拦截；
之后的动作与Native中调Js一样，shouldOverrideUrlLoading中拦截，执行flushMessageQueue，loadUrl，Js#_fetchQueue方法，生成回调，保存responseCallbacks中，后面继续执行handlerReturnData，接着看loadUrl中的回调，这次由于js传来的消息没有responseId，直接看else分支，即上文中省略号的地方：
if (!TextUtils.isEmpty(responseId)) {
...
} else {
CallBackFunction responseFunction = null;
// if had callbackId
final String callbackId = m.getCallbackId();
if (!TextUtils.isEmpty(callbackId)) {
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
Message responseMsg = new Message();
responseMsg.setResponseId(callbackId);
responseMsg.setResponseData(data);
queueMessage(responseMsg);
}
};
} else {
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
// do nothing
}
};
}
BridgeHandler handler;
if (!TextUtils.isEmpty(m.getHandlerName())) {
handler = messageHandlers.get(m.getHandlerName());
} else {
handler = defaultHandler;
}
if (handler != null){
handler.handler(m.getData(), responseFunction);
}
}
获取callbackId，如果为空，直接默认不做处理；
不为空则说明Js调用了Native，需要Native回调，创建一个回调函数，最后从消息中取出方法名去匹配Native之前注册的方法，如果不为空，则调用该对象的回调方法；
上面Native回调不为空时创建的回调：
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
Message responseMsg = new Message();
responseMsg.setResponseId(callbackId);
responseMsg.setResponseData(data);
queueMessage(responseMsg);
}
};
将要回传的数据封装成message,原先从js传过来的callbackId变成responseId，然后调用queueMessage，dispatchMessage，Js#_handleMessageFromNative，_dispatchMessageFromNative，上文中已分析该方法；