WebViewJavascriptBridge实现原理

关于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。这里不再多述。

你可能感兴趣的:(WebViewJavascriptBridge实现原理)