JSBridge交互原理詳解_iOS&h5

注：本文需同時(shí)了解iOS和h5相關(guān)開發(fā)技能開發(fā)者查看，此處以h5調(diào)iOS客戶端為例

iOS調(diào)h5，流程比較簡單，此處不做分析

簡介：

當(dāng)前移動(dòng)互聯(lián)背景下，移動(dòng)應(yīng)用市場(chǎng)越來越小，基本都是各大廠和政府的利民軟件才能存活，為了提高效率，節(jié)約成本，小一點(diǎn)的公司，直接跨平臺(tái)開發(fā)，什么Flutter，React用起來，UI干著產(chǎn)品的活，公司全員都是測(cè)試，開發(fā)沒有技能限制，都得會(huì)，所以移動(dòng)開發(fā)人員的生存空間也越來越小，市場(chǎng)也已經(jīng)卷的不成樣子。大點(diǎn)的公司在用戶體驗(yàn)上要求稍微高點(diǎn)，會(huì)給原生留出一絲生存空間，但在大環(huán)境下，嵌入H5是必不可少的。而大量交互，用原生方法或多或少會(huì)有些問題，而且開發(fā)起來也比較復(fù)雜，因此大多采用JSBridage。對(duì)于JSBridge，可能有些人會(huì)陌生，大多數(shù)人也只是會(huì)用，其實(shí)會(huì)用就夠了。那么為什么還要去了解其原理呢，還不都是為了不被卷。
另：本文如有不當(dāng)之處，還請(qǐng)指出

1，iOS客戶端注冊(cè)js方法

注冊(cè)js方法時(shí)，會(huì)以方法名為key，并同時(shí)生成一個(gè)block作為回調(diào)函數(shù)，作為value，存儲(chǔ)在一個(gè)全局的字典中。

1，iOS 注冊(cè)js方法

[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"testObjcCallback called: %@", data);
    responseCallback(@"Response from testObjcCallback");
}];

2，全局字典保存相關(guān)數(shù)據(jù)

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
    _base.messageHandlers[handlerName] = [handler copy];
}

2，客戶端加載網(wǎng)頁，h5開始加載jsbridge.js文件

在jsbridge.js文件中，iframe控件會(huì)被注入，其內(nèi)src里https://bridge_loaded 地址會(huì)被執(zhí)行加載

jsbridge.js文件

function setupWebViewJavascriptBridge(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)
}

setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
    responseCallback("回調(diào)客戶端數(shù)據(jù)");
})
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
    
    //response為客戶端傳入數(shù)據(jù)
})
})

3，iOS端第一次攔截地址

1，在jsbridge庫中，WKWebviewBridge文件（UIWebView已被舍棄，不做考慮），在webview將要加載一個(gè)鏈接的代理中，會(huì)對(duì)加載地址判斷，當(dāng)收到https://bridge_loaded/ 連接后，對(duì)其攔截。

截屏2021-06-18 23.51.30.png

injectJavascriptFile 方法生成js代碼

- (void)injectJavascriptFile {
NSString *js = WebViewJavascriptBridge_js();
[self _evaluateJavascript:js];
if (self.startupMessageQueue) {
    NSArray* queue = self.startupMessageQueue;
    self.startupMessageQueue = nil;
    for (id queuedMessage in queue) {
        [self _dispatchMessage:queuedMessage];
    }
}
}

2，庫內(nèi)會(huì)生成一段js代碼，其內(nèi)包含多個(gè)方法，registerHandler，callHandler，_fetchQueue,_handleMessageFromObjc等。

window.WebViewJavascriptBridge = {
 registerHandler: registerHandler,
 callHandler: callHandler,
 disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
 _fetchQueue: _fetchQueue,
 _handleMessageFromObjC: _handleMessageFromObjC
     
 };

3，此js代碼向h5注入，賦值給Window的WebViewJavascriptBridge屬性。

截屏2021-06-18 23.59.30.png

4，h5執(zhí)行callHandler方法

bridge.callHandler('testObjcCallback', {'foo': 'bar'},  function(response) {            
log('JS got response', response)
})

5，在callHandler方法里會(huì)調(diào)用_doSend()函數(shù)

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

6，js代碼包含另一個(gè)iframe為message傳遞，src為https://_wvjb_queue_message/ 類型
_doSend函數(shù)會(huì)執(zhí)行message 的iframe

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

4，iOS客戶端第二次攔截地址

1，當(dāng)遇到https://_wvjb_queue_message/鏈接后鏈接

截屏2021-06-19 00.01.10.png

2，調(diào)用js代碼注入中的WebViewJavascriptBridge.fetchQueue();方法


截屏2021-06-19 00.02.55.png

方法回調(diào)中包含h5調(diào)用callhandler的方法名，參數(shù)和callbackid。


截屏2021-06-19 00.06.32.png

3，h5執(zhí)行WebViewJavascriptBridge.fetchQueue()函數(shù)

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

sendMessageQueue的內(nèi)容，在_doSend()函數(shù)執(zhí)行的后，把message，即h5要傳的參數(shù)，push進(jìn)去了。
4，iOS客戶端根據(jù)方法名去除全局保存的函數(shù)，并調(diào)用把callbackid，data傳遞過去。


截屏2021-06-19 00.07.57.png

5，客戶端在此時(shí)執(zhí)行自己第一步注冊(cè)的js方法的回調(diào)處理自有業(yè)務(wù)邏輯。


截屏2021-06-19 00.10.31.png

5，iOS回調(diào)h5

1，客戶端處理之后，把相應(yīng)結(jié)果，通過responseCallBacke繼續(xù)回調(diào)


截屏2021-06-19 00.11.51.png

2，客戶端調(diào)用注入的js代碼中的WebViewJavascriptBridge._handleMessageFromObjC(data)方法

data的數(shù)據(jù)類型為
{
"responseId":"callbackid",
"responseData":"回調(diào)數(shù)據(jù)"
}

截屏2021-06-19 00.15.43.png

3，h5執(zhí)行_handleMessageFromObjC函數(shù)，通過responseid，找到對(duì)應(yīng)callhander函數(shù)的回調(diào)

6，h5處理回調(diào)數(shù)據(jù)

1，h5執(zhí)行_handleMessageFromObjC方法，找到對(duì)應(yīng)callHandler的方法，刪除客戶端回調(diào)數(shù)據(jù)中的responseId

 function _handleMessageFromObjC(messageJSON) {
     _dispatchMessageFromObjC(messageJSON);
     
 }
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);
                 
             }
             
         }
         
     }
     
 }

2，_handleMessageFromObjC方法回調(diào)，此時(shí)h5中的res后的函數(shù)執(zhí)行，處理h5相關(guān)業(yè)務(wù)邏輯。

bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
            
//處理h5相關(guān)業(yè)務(wù)          
})

此時(shí)，一次完整的交互流程結(jié)束

完整注入的js代碼如下

  ; (function() {
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 = 'https';
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);
        
    }
    
}
})();
備注：本文轉(zhuǎn)載請(qǐng)署名
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請(qǐng)通過簡信或評(píng)論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容