OC与JS交互之 WebViewJavascriptBridge 实现原理

导语

本文将讲解 UIWebView 和 WKWebView 通过 WebViewJavascriptBridge 三方库进行通信的原理；梳理OC -- > JS， JS --> OC 调动交互的流程；和OC方、JS方各自做了具体什么操作才使Native与H5有了交互的功能。本文并不会去讲解 WebViewJavascriptBridge 库的使用和方法的讲解，你可以通过以下参考内容去了解。

OC 调用 JS

oc 调用 js

OC 相关代码： 调用与JS商量好的 oc_to_js_js’registerFunctionName 函数

[_webViewBridge callHandler:@“oc_to_js_js’registerFunctionName” data:@"oc传给js的数据” responseCallback:^(id responseData) {
        NSLog(@"JS执行完回调给OC的数据：%@“,responseData);
    }];

JS 相关代码： 注册一个叫 oc_to_js_js’registerFunctionName 的函数

setupWebViewJavascriptBridge(function(bridge) {
                                 bridge.registerHandler('oc_to_js_js’registerFunctionName', function(data, responseCallback) {
                                                        alert(‘oc成功调用js，并打印数据data:’+data);
                                                        responseCallback(‘js执行完回调给OC的数据');
                                                        })
                                 })

如上OC和JS代码可以看出，OC需要调用JS注册的‘ oc_to_js_js’registerFunctionName’ 方法，并传递数据data给JS；JS在收到OC的消息后alert了传递过来的数据，并回传了一份数据给OC。
那么这个 oc--data--js--data--oc 的流程到底是怎样的呢
大致步骤：

  • 步骤一 (oc环境) ： OC先声明一段JS代码，在第一次进入此webView页的时候注入到 webView中，之后webView上下文中就有了这些js函数。
注入JS代码
- (void)webView:(WebView *)webView decidePolicyForNavigationAction:(NSDictionary *)actionInformation request:(NSURLRequest *)request frame:(WebFrame *)frame decisionListener:(id<WebPolicyDecisionListener>)listener {
   ...
   if ([_base isQueueMessageURL:navigationAction.request.URL]) {
         [webView stringByEvaluatingJavaScriptFromString:@“js代码”]
    } 
   ...  
}
  • 步骤二 (js环境) ： 注册声明 js 会被 oc 调用的方法存放在 js 环境的字典中；
保存js注册的函数
function registerHandler(handlerName, handler) {
   messageHandlers[handlerName] = handler;
}
  • 步骤三 (oc环境) ：oc 发起调用，生成一个message字典，三个参数（handlerName 方法名，data数据， callbackId 回调方法）
- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {
    NSMutableDictionary* message = [NSMutableDictionary dictionary];
    if (data) {
        message[@"data"] = data;
    }
    if (responseCallback) {
        NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
        self.responseCallbacks[callbackId] = [responseCallback copy];
        message[@"callbackId"] = callbackId;
    }
    if (handlerName) {
        message[@"handlerName"] = handlerName;
    }
    [self _queueMessage:message];
}
  • 步骤四 (oc环境) ： 把message字典转成json字符串，处理字符串里面的\、\、\r、\n 等特殊字符。生成新的字符串并加上
    WebViewJavascriptBridge._handleMessageFromObjC(‘messageJSON‘)，形成一段字符串形式的js代码（既通过提前注入js中的函数_handleMessageFromObjC去处理 messageJSON 参数）。
- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    [self _log:@"SEND" json:messageJSON];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
  
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
}
  • 步骤五 (oc环境) ： 通过调用oc系统的 stringByEvaluatingJavaScriptFromString 方法让webView执行上述js代码。 注： WKWebView 为 evaluateJavaScript 方法.
NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
dispatch_sync(dispatch_get_main_queue(), ^{
           [webView stringByEvaluatingJavaScriptFromString:javascriptCommand]
        });
  • 步骤六 (js环境) ： 通过 oc 传入过来的json数据，解析后取出 functionName 和 callbackId，从事先注册好的缓存中获取对应handler函数和callback函数， 并执行。
取出 callback 函数和 handler 函数执行调用，在handler中执行 callback 数据回传操作。
responseCallback = responseCallbacks[message.responseId];
var handler = messageHandlers[message.handlerName];
if (handler)  {
    handler(message.data, responseCallback);
}
  • 步骤七 (js环境) ：在js的 callback 函数执行完后，需要从js环境发生数据给oc环境，这时候js会改变html根节点下隐性的<iframe>标签的src，当iframe的src改变时会发起Request，这时候oc就能监听到js发生了Request操作 。 这个环节的具体操作也就跟下面即将要讲的 js 调用 oc 的流程类似了。

JS 调用 OC

js 调用 oc

JS调用OC 一般会有三种方式

  • iOS7 引入了 JavaScriptCore，可以初始化一个 JSContext 对象，然后约定好一个方法名就好了。
  • 特殊的一个 Scheme 。客户端这边会拦截到这种指令格式的 URL 需求，实现一个 JS 到 Native 传递消息的一个过程
  • 轮询，对于 JS 他需要把给 Native 传递的消息，转化成一个 JSON ，客户端这边一般会开一个线程，每隔一段时间会调 JS 的方法，从这个方法里面把 JS 需要给 Native 传递的消息全部取出来，取出来之后再去做相应的操作，客户端开销比较大。

本文只要讲解第二种方式，通过Scheme去实现一个 JS 到 Native 传递消息的一个过程。

OC 代码 ： 注册一个叫 js_to_oc_oc’registerFunctionName 的方法

[webViewBridge registerHandler:@"js_to_oc_oc’registerFunctionName” handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@“js成功调用oc， 并获取数据data”);
        responseCallback(@“oc回调给js的数据 如：支付失败”);
    }];

JS 代码 ： 调用与OC商量好的 js_to_oc_oc’registerFunctionName 方法

WebViewJavascriptBridge.callHandler('js_to_oc_oc’registerFunctionName', "{\"content\" : \"js传递给oc的数据内容\”}”, function(response) {
                                            alert('oc成功被调用，并回传给js的回调数据:’ + response);
                                            document.getElementById("returnValue").value = response;
                                            });

如上OC和JS方法可以看出， JS需要调用OC注册的‘ js_to_oc_oc’registerFunctionName’ 方法，并传递数据json字符串给OC；OC在收到JS的消息后log了传递过来的数据，并回传了一份数据给JS。
大致步骤：

  • 步骤一 (oc环境) ： OC先声明一段 js 通用代码，在第一次进入此webView页的时候注入到 webView中，之后webView上下文中就有了这些js方法（如果已注入过忽略此步）。

  • 步骤二 (oc环境) ： 注册oc方法， 存储一个message字典，以 handlerName 为key， handler 为value 。

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
    _base.messageHandlers[handlerName] = [handler copy];
}
  • 步骤三 (js环境) ： js 发起调用方法，传入handlerName，data，callBack 参数， 生成message字典，保存在js环境中。
function callHandler(handlerName, data, responseCallback) {
    ...
    _doSend({
        handlerName: handlerName,
        data: data
    }, responseCallback);
}
function _doSend(message, responseCallback) {
    if (responseCallback) {
        var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
        responseCallbacks[callbackId] = responseCallback;
        message['callbackId'] = callbackId;
    }
    sendMessageQueue.push(message);
}
  • 步骤四 (js环境) ：js发起调用时，会对当前html中的<iframe> 标签的src重新赋值一个scheme， <iframe> 标签会在src改变时自动发起Request跳转, 因此 oc 才会收到消息（下一步）
最开始注入的js代码中，会对当前html添加一个<iframe>, 并设置为隐性
iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
document.documentElement.appendChild(iframe);

重新赋值iframe的src
iframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
  • 步骤五 (oc环境) ：WKWebview 和 UIWebview 都会有个 decidePolicyForNavigationAction 的代理方法可以拦截Request的url， 对url的scheme进行判断是普通跳转还是JS跳转。
- (void)webView:(WebView *)webView decidePolicyForNavigationAction:(NSDictionary *)actionInformation request:(NSURLRequest *)request frame:(WebFrame *)frame decisionListener:(id<WebPolicyDecisionListener>)listener {
    ...  
    if ([_base isCorrectProcotocolScheme:url]) {
         ...
         // js 跳转，拦截处理
        decisionHandler(WKNavigationActionPolicyCancel); 
    }else {
        decisionHandler(WKNavigationActionPolicyAllow); 
    }
}
  • 步骤六 (oc环境) ：如果是js跳转， 通过系统的 stringByEvaluatingJavaScriptFromString 方法调用 ‘WebViewJavascriptBridge._fetchQueue()’ 这段注入过的js代码， 获取此方法的返回值， 既获取步骤3的 message。 注： WKWebView 为 evaluateJavaScript 方法获取.
[webView evaluateJavaScript:@"WebViewJavascriptBridge._fetchQueue();" completionHandler:^(NSString* result, NSError* error) {
   // result 为获取到的函数信息（以 handlerName、data、callback） 为键的json字符串
}];

js 函数
function _fetchQueue() {
    var messageQueueString = JSON.stringify(sendMessageQueue);
    sendMessageQueue = [];
    return messageQueueString;
}
  • 步骤七 (oc环境) ：根据从js获取到的函数信息message ，以 handlerName 为key ，从之前 oc 中保存的方法字典中取出对应方法，并执行。
WVJBResponseCallback responseCallback = _responseCallbacks[message[@"responseId"]]; // 获取存储的callback函数
WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];  // 获取存储的handler函数
 if (!handler) {
     NSLog(@"oc环境中没有注册过此方法");
    continue;
 }     
handler(message[@"data"], responseCallback);

总结

  • OC —>JS ： js注册好 functionNameIdentitify , oc 组装好 {functionNameIdentitify， data， callback} 字典，再转化成字符串后，通过系统方法执行js代码，js函数里去解析传入的json串，获取functionName等数据，从缓存中取出对应函数。

  • JS —> OC ： 原理类似，oc 注册好 functionNameIdentitify 后 ， 当html的<iframe>request后， 系统方法 decidePolicyForNavigationAction 会被执行，获取到当前操作的request.url。 拦截到是js发起的操作后， 通过系统方法stringByEvaluatingJavaScriptFromString 和 js方法._fetchQueue() 获取对应的js数据； 从数据中获取functionName 或 callbackId， 最后在oc缓存的字典中取出对应方法执行。

  • 不管是OC —>JS, 还是JS —> OC ， 最终都是通过系统的stringByEvaluatingJavaScriptFromString 或者 evaluateJavaScript 方法建立的桥梁，去获取js数据或者传入数据给js。

关于 js 与 oc 交互的更多细节，可以自己查看WebViewJavascriptBridge的源码 https://github.com/marcuswestin/WebViewJavascriptBridge
最后附上一段一开始被注入到webView中的JS代码
if (window.WebViewJavascriptBridge) {
    return;
}

if (!window.onerror) {
    window.onerror = function(msg, url, line) {
        console.log("WebViewJavascriptBridge: ERROR:" + msg + "@" + url + ":" + line);
    }
}
window.WebViewJavascriptBridge = {
    registerHandler: registerHandler,
    callHandler: callHandler,
    disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
    _fetchQueue: _fetchQueue,
    _handleMessageFromObjC: _handleMessageFromObjC
};

var messagingIframe;
var sendMessageQueue = [];
var messageHandlers = {};

var CUSTOM_PROTOCOL_SCHEME = 'wvjbscheme';
var QUEUE_HAS_MESSAGE = '__WVJB_QUEUE_MESSAGE__';

var responseCallbacks = {};
var uniqueId = 1;
var dispatchMessagesWithTimeoutSafety = true;

function registerHandler(handlerName, handler) {
    messageHandlers[handlerName] = handler;
}

function callHandler(handlerName, data, responseCallback) {
    if (arguments.length == 2 && typeof data == 'function') {
        responseCallback = data;
        data = null;
    }
    _doSend({
        handlerName: handlerName,
        data: data
    }, responseCallback);
}

function disableJavscriptAlertBoxSafetyTimeout() {
    dispatchMessagesWithTimeoutSafety = false;
}

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;
}

function _fetchQueue() {
    var messageQueueString = JSON.stringify(sendMessageQueue);
    sendMessageQueue = [];
    return messageQueueString;
}

function _dispatchMessageFromObjC(messageJSON) {
    if (dispatchMessagesWithTimeoutSafety) {
        setTimeout(_doDispatchMessageFromObjC);
    } else {
        _doDispatchMessageFromObjC();
    }

    function _doDispatchMessageFromObjC() {
        var message = JSON.parse(messageJSON);
        var messageHandler;
        var responseCallback;

        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({
                        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);
            }
        }
    }
}

function _handleMessageFromObjC(messageJSON) {
    _dispatchMessageFromObjC(messageJSON);
}

messagingIframe = document.createElement('iframe');
messagingIframe.style.display = 'none';
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
document.documentElement.appendChild(messagingIframe);

registerHandler("_disableJavascriptAlertBoxSafetyTimeout", disableJavscriptAlertBoxSafetyTimeout);

setTimeout(_callWVJBCallbacks, 0);

function _callWVJBCallbacks() {
    var callbacks = window.WVJBCallbacks;
    delete window.WVJBCallbacks;
    for (var i = 0; i < callbacks.length; i++) {
        callbacks[i](WebViewJavascriptBridge);
    }
}
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349

推荐阅读更多精彩内容