//notation: js file can only use this kind of comments
//since comments will cause error when use in webview.loadurl,
//comments will be remove by java use regexp
(function() {
if (window.WebViewJavascriptBridge) {
return;
}
var messagingIframe;
var bizMessagingIframe;
var sendMessageQueue = [];
var receiveMessageQueue = [];
var messageHandlers = {};
var CUSTOM_PROTOCOL_SCHEME = 'yy';
var QUEUE_HAS_MESSAGE = '__QUEUE_MESSAGE__/';
var responseCallbacks = {};
var uniqueId = 1;
// 创建消息index队列iframe
function _createQueueReadyIframe(doc) {
messagingIframe = doc.createElement('iframe');
messagingIframe.style.display = 'none';
doc.documentElement.appendChild(messagingIframe);
}
//创建消息体队列iframe
function _createQueueReadyIframe4biz(doc) {
bizMessagingIframe = doc.createElement('iframe');
bizMessagingIframe.style.display = 'none';
doc.documentElement.appendChild(bizMessagingIframe);
}
//set default messageHandler 初始化默认的消息线程
function init(messageHandler) {
if (WebViewJavascriptBridge._messageHandler) {
throw new Error('WebViewJavascriptBridge.init called twice');
}
WebViewJavascriptBridge._messageHandler = messageHandler;
var receivedMessages = receiveMessageQueue;
receiveMessageQueue = null;
for (var i = 0; i < receivedMessages.length; i++) {
_dispatchMessageFromNative(receivedMessages[i]);
}
}
// 发送
function send(data, responseCallback) {
_doSend({
data: data
}, responseCallback);
}
// 注册线程 往数组里面添加值
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler;
}
// 调用线程
function callHandler(handlerName, data, responseCallback) {
_doSend({
handlerName: handlerName,
data: data
}, responseCallback);
}
//sendMessage add message, 触发native处理 sendMessage
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
// 提供给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
bizMessagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}
//提供给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);
}
}
}
});
}
//提供给native调用,receiveMessageQueue 在会在页面加载完后赋值为null,所以
function _handleMessageFromNative(messageJSON) {
console.log(messageJSON);
if (receiveMessageQueue) {
receiveMessageQueue.push(messageJSON);
}
_dispatchMessageFromNative(messageJSON);
}
var WebViewJavascriptBridge = window.WebViewJavascriptBridge = {
init: init,
send: send,
registerHandler: registerHandler,
callHandler: callHandler,
_fetchQueue: _fetchQueue,
_handleMessageFromNative: _handleMessageFromNative
};
var doc = document;
_createQueueReadyIframe(doc);
_createQueueReadyIframe4biz(doc);
var readyEvent = doc.createEvent('Events');
readyEvent.initEvent('WebViewJavascriptBridgeReady');
readyEvent.bridge = WebViewJavascriptBridge;
doc.dispatchEvent(readyEvent);
})();
待过的某家公司中用于和原生交互的方案,当初这个文件也是从网上找的,拿来就用,没怎么细看。
最早我们的Hybrid应用只是h5调用原生的一些方法,所以只使用了native向页面注入一个webview的变量,并在这个变量上挂载一些方法,在安卓上存在一些问题(?安全漏洞)。后来改用bridge,安全性和兼容性比较好。bridge有一个小小的问题就是如果原生端不存在对应名称的方法,h5无法知道,所以h5需要做一套版本的判断,再进行方法的调用。
执行的操作
简单分析一下:这个文件包含了一个立即执行函数,代码加载后,做了几件事情:
- 定义协议scheme,类似http,这里定义为yy
- 创建消息index队列iframe,这个iframe后面可以看到是h5端使用的;创建消息体队列iframe,这个iframe可以看到是给原生端使用的。这两个iframe用于消息传递。
- 创建WebViewJavaScriptBridge对象并挂载到window上
- 创建Event对象,初始化事件名为WebViewJavaScriptBridgeReady的事件,并触发事件,表示bridge对象已准备好,可以使用了。
bridge对象
bridge对象有6个方法,分别为init、send、registerHandler、callHandler、_fetchQueue、_handleMessageFromNative,方法的作用大致可以见名知意。
- init方法,用于设置默认的消息处理函数,如果此时h5端的消息接收队列不为空,则调用_dispatchMessageFromNative来分发处理队列中的消息
- send方法,用于h5端发送消息,触发native去处理,调用_doSend将消息塞进h5端的消息发送队列,并将messagingIframe的src设置为发送的协议,触发iframe重新请求加载
- registerHandler方法:用于定义消息名称与消息回调函数的映射,保存在messageHandlers对象上,提供js函数给native调用,在原生完成操作后,将数据通过回调函数传递给h5
- callHandler方法:用于h5调用_doSend修改iframe src的方式将消息和数据传递原生
- _fetchQueue方法:提供给native使用的方法,将bizMessagingIframe的src设置为接收的协议,触发iframe重新请求,使原生获取到h5发送的消息
- _handleMessageFromNative方法:提供给native使用的方法,将消息塞进h5的消息接收队列,并进行消息分发
大致流程
1. H5调用Native
2. Native向H5传递
原理
H5调用Native的流程主要利用了iframe与原生端进行交互,通过修改iframe的src来触发原生端调用对应的操作,原生端监听到触发后,经过一系列操作后得到一个结果,再通过调用h5的回调函数,使h5可以处理原生返回的结果。
Native向h5传递有点类似h5的事件监听,h5注册一个名称用于标记操作,映射一个回调函数,原生端在用户做了某些操作后,获取到h5注册的操作对应的回调函数,并进行调用,将操作结果传递给h5。
参考
https://github.com/lzyzsd/JsB...
luffyjet/WebViewJavaScriptBridge
marcuswestin/WebViewJavascriptBridge
https://blog.csdn.net/weixin_...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。