关于WebViewJavascriptBridge的功能不多做介绍,有兴趣的小伙伴可以搜一下
使用示例
iOS端使用如下
let bridge = WKWebViewJavascriptBridge(for: webView)
//原生调用js
bridge.callHandler("jsFunction", data: [:], responseCallback: { (obj) in
})
//native端注册方法,以供js调用
bridge.registerHandler("nativeFunction") { (data, reponseCallback) in
}
实现原理:
js端有一个处理对象,window.WebViewJavascriptBridge对象,原生端也有一个类似的对象WebViewJavascriptBridgeBase,他们两个在两端,分别使用拦截url和注入js的方式,进行通信,他们的主要工作内容是
存储自己端registed handler(实质是个block数组)
存储回调(实质也是个block数组)
对需要通信数据进行编码和解码
//js端存储相关代码
var messageHandlers = {}; //存储registerHandler方法注册过的block
var responseCallbacks = {}; //存储callHandler中的responseCallback
//原生端存储相关
@interface WebViewJavascriptBridgeBase : NSObject
@property (strong, nonatomic) NSMutableDictionary* responseCallbacks; //存储callHandler中的responseCallback
@property (strong, nonatomic) NSMutableDictionary* messageHandlers; //存储registerHandler方法注册过的block
@end
初始化过程
原生端的初始化:原生端调用WebViewJavascriptBridge库,生成需要的WebViewJavascriptBridge或者WKWebViewJavascriptBridge实例
js端的初始化:js端加载地址为“https://__bridge_loaded__”的新页面,新页面的加载事件触发webview的代理方法
//WKWebView
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
//UIWebView
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
在代理方法中识别加载地址为“https://__bridge_loaded__”,调用WebViewJavascriptBridge库中预先写好的一段js代码 — WebViewJavascriptBridge_JS,使用evaluateJavaScript执行这段js代码,在js端生成window.WebViewJavascriptBridge对象及一些需要的js方法。
这种交互方式,比较通用的叫法是 url sheme
原生调用js
原生调用js的callHandler方法,实际上是调用WebViewJavascriptBridgeBase中方法对参数进行处理。
WebViewJavascriptBridgeBase会为此次调用的回调生成一个id,并在responseCallbacks中用ID为key存储回调。然后把js方法名、参数、回调id 组织成字典,再json字符串化。
{
"data": ["ID": 67788],
"callbackId": "objc_cb_1",
"handlerName": "jsFunction"
}
然后用“WebViewJavascriptBridge._handleMessageFromObjC”把这个message字符串包起来。_handleMessageFromObjC的是初始化时通过WebViewJavascriptBridge_JS注入js中的一个js方法。接下来通过evaluateJavaScript执行handleMessageFromObjC。
NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
js端的bridge方法handleMessageFromObjC被调用后,先将json字符串解析成字典对象,然后根据字典中的handlerName值,在messageHandlers中寻找注册过的对应name的function,将message.data和js回调传给该function,进行调用。
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};
}
var handler = messageHandlers[message.handlerName];
if (!handler) {
console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
} else {
handler(message.data, responseCallback);
}
注意一点,上面的responseCallback是js自己的回调,原生的回调还留在WebViewJavascriptBridge的responseCallbacks字典中存储。js回调的功能是给原生发送回调消息。
js回调调用_doSend方法中把字典类型的message添加进sendMessageQueue数组
[handlerName: xxxx, responseId: xxx, responseData: xxx] //iOS 字典
{handlerName: xxxx, responseId: xxx, responseData: xxx} //js 字典
然后加载一个地址为“https://__wvjb_queue_message__”的新页面,原生的代理方法被调用
WebViewJavascriptBridge中的代理方法识别到特殊的加载地址,使用evaluateJavaScript调用“WebViewJavascriptBridge._fetchQueue();”,js端的_fetchQueue把sendMessageQueue数组中的message都格式化成json字符串。原生拿到messages的json字符串后先把字符串转换成数组,然后遍历数组处理每个message(通常只有一个)。原生bridge发现message中有responseId,则用responseId调用对应的responseCallback。如果没有responseId,说明这不是 原生调js - js回调原生,而是js直接调用原生的方法,那就从messageHandlers中寻找对应handlerName的block
在原生端初始化WebViewJavascriptBridge的时候,WebViewJavascriptBridge就把webview的代理指向了自己,所以这里能拦截到。如果webview的代理被指向了其他地方,那WebViewJavascriptBridge就不工作了。毕竟js端初始化就指望着这个代理方法拦截到请求,然后去给js注入window.WebViewJavascriptBridge对象。
js调用原生
前面原生调用js中说到了原生发消息给js,js怎么处理,原生的回调怎么处理。js调用原生是类似的逻辑。只是双方发消息的方式不一样,一个是通过evaluateJavaScript,一个是通过url sheme。这里不再多述。