iOS下JS與OC互相調用（五）--UIWebView + WebViewJavascriptBridge

時間  2019-12-05
標籤 ios 互相 調用 uiwebview webviewjavascriptbridge 欄目 iOS 简体版
原文   原文鏈接

WebViewJavascriptBridge是一個有點年代的JS與OC交互的庫，使用該庫的著名應用還挺多的，目前這個庫有7000+star。我去翻看了它的初版本已是4年前了，在版本V4.1.4以及以前，該庫只有一個類和一個js 的txt文件，因此舊版本的WebViewJavascriptBridge 是很是容易理解的。而最新版的WebViewJavascriptBridge由於也要兼容WKWebView，因此裏面也加入了兩個新的類，一開始看的時候，會被它裏面複雜的邏輯嚇到，其實仔細閱讀後，它仍是很是簡單的。javascript

WebViewJavascriptBridge使用講解

因爲WebViewJavascriptBridge在UIWebView和WKWebView下的使用有些許差異，因此就分紅兩篇文章來說解WebViewJavascriptBridge。 本文介紹的是在UIWebView中使用WebViewJavascriptBridge來達到JS與OC互相調用的目的。WKWebView使用的是WKWebViewJavascriptBridge。接下來，我就從零開始邊搭建工程邊講解WebViewJavascriptBridge。html

先上效果圖：java

第一步、搭建工程，將WebViewJavascriptBridge庫添加到工程中。

新建工程的步驟就略過了，WebViewJavascriptBridge的github地址是：WebViewJavascriptBridge，我使用的是版本V5.0.5。git

目前我Demo中的WebViewJavascriptBridge庫在最新的iOS系統有崩潰，各位在使用該第三方庫時，要先更新到最新版本。github

第二步、建立UIWebView和WebViewJavascriptBridge示例。

2.1 建立UIWebView

建立UIWebView的代碼(viewDidLoad中截選)：web

    self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:self.webView];
    
    NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:htmlURL];
    
    // UIWebView 滾動的比較慢，這裏設置爲正常速度
    self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
    [self.webView loadRequest:request];
複製代碼

這裏不要爲UIWebView設置代理，由於在建立WebViewJavascriptBridge的時候，UIWebView的代理已經被賦值給了WebViewJavascriptBridge。json

2.2 建立WebViewJavascriptBridge

由於WebViewJavascriptBridge實例，在控制器中多個地方用到，所以最好定義一個property或者實例變量存起來。數組

_webViewBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// {setWebViewDelegate}這個方法，能夠將UIWebView的代理，從_webViewBridge中再傳遞出來。
// 因此若是你要在控制器中實現UIWebView的代理方法時，添加下面這樣代碼，不然能夠不寫。
[_webViewBridge setWebViewDelegate:self];
複製代碼

而後跟蹤進{- bridgeForWebView }方法，看它具體是怎麼實現的。bash

+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
    WebViewJavascriptBridge* bridge = [[self alloc] init];
    [bridge _platformSpecificSetup:webView];
    return bridge;
}

// 上面方法調用了這個方法
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
    _webView = webView;
    _webView.delegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
}
複製代碼

其實{-bridgeForWebView }內部也不過是初始化了一個WebViewJavascriptBridge對象，併爲其實例變量_webView 和 _base賦值而已。app

第三步、註冊js 要調用的Native 功能。

先上示例代碼，再分析功能：

#pragma mark - private method
- (void)registerNativeFunctions
{
    [self registScanFunction];
    
    [self registShareFunction];
    
    [self registLocationFunction];
    
    [self regitstBGColorFunction];
    
    [self registPayFunction];
    
    [self registShakeFunction];
}

- (void)registShareFunction
{
    // 全部JS 須要調用的原生功能都要先用registerHandler註冊一下
    [_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的類型與 JS中傳的參數有關
        NSDictionary *tempDic = data;
        // 在這裏執行分享的操做
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        
        // 將分享的結果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
        responseCallback(result);
    }];
}
複製代碼

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler 該方法有兩個參數：第一個參數handlerName，是對這個功能起的一個別名；第二個參數handler，是個block，也就是Native 實現的功能。JS要調用的Native 實現其實就是block 的 {} 內的代碼功能。 爲了便於維護，咱們能夠將JS要調用的Native方法都集中到一塊兒，而後單個功能再封裝一個方法。

第四步、完成HMTL必要的JS代碼

因爲WebViewJavascriptBridge也是攔截URL來實現的調用原生功能，因此有一些代碼跟以前iOS下JS與OC互相調用（一）中的HTML JS代碼很類似。

HTML 中有一個必需要添加的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 = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
複製代碼

上面這個方法的參數是一個function，這個方法的做用主要是在第一次加載HTML的時候起做用，目的是加載一次wvjbscheme://__BRIDGE_LOADED__，來觸發往HTML中注入一些已經寫好的JS方法。 看看上面的方法與下面這個是否是很類似：

function loadURL(url) {
    var iFrame;
    iFrame = document.createElement("iframe");
    iFrame.setAttribute("src", url);
    iFrame.setAttribute("style", "display:none;");
    iFrame.setAttribute("height", "0px");
    iFrame.setAttribute("width", "0px");
    iFrame.setAttribute("frameborder", "0");
    document.body.appendChild(iFrame);
    // 發起請求後這個iFrame就沒用了，因此把它從dom上移除掉
    iFrame.parentNode.removeChild(iFrame);
    iFrame = null;
}
複製代碼

添加完setupWebViewJavascriptBridge方法，須要在JS中主動調用一次該方法：

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
        alert('JS方法被調用:'+data);
        responseCallback('js執行過了');
     })
})
複製代碼

Native 須要調用的 JS 功能，也是須要先註冊，而後再執行的。若是Native 須要調用的JS 功能有多個，那麼這些功能都要在這裏先註冊，註冊以後纔可以被Native 調用。 接下來須要好好分析一下JS 中這個方法的做用了。

這裏是重點：

一、首先調用setupWebViewJavascriptBridge，第一次執行的時候，因爲window.WebViewJavascriptBridge和window.WVJBCallbacks都不存在，因此會繼續往下執行，將參數callback（它是一個function）裝進數組賦值給window.WVJBCallbacks。 js 支持動態添加屬性 並賦值，這裏window.WVJBCallbacks = [callback];就是動態添加屬性，並賦值。 另外js中的全局變量均可以使用window.xxxx來調用;動態添加的屬性也能夠不加window.，直接使用。

二、WebViewJavascriptBridge 幫助JS調用Native的url 有兩種，一種是wvjbscheme://__BRIDGE_LOADED__；而另外一種是wvjbscheme://__WVJB_QUEUE_MESSAGE__。前者只有在調用setupWebViewJavascriptBridge的時候執行一次，通常來講這個url 若是沒有頁面應該只會執行一次。第二種url全部js調用Native 功能時，都會使用到。

三、在攔截到自定義的url 時，WebViewJavascriptBridge分了三種狀況，若是是wvjbscheme://__BRIDGE_LOADED__,就往HMTL 中注入已經寫好的js，這個js 在WebViewJavascriptBridge_JS中；若是是wvjbscheme://__WVJB_QUEUE_MESSAGE__,那就利用stringByEvaluatingJavaScriptFromString，取回調用js中callHandler傳進去的參數。 而後再從WebViewJavascriptBridge以前保存的Native 方法對應的block，調用對應的block。

第五步、調用Native 功能

利用以前注入的JS方法callHandler 就能夠調用Native 功能了。 示例代碼以下：

function shareClick() {
    var params = {'title':'測試分享的標題','content':'測試分享的內容','url':'http://www.baidu.com'};
    WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
         alert(response);
        document.getElementById("returnValue").value = response;
     });
}
複製代碼

這裏callHandler前的WebViewJavascriptBridge,其實就是上一步注入到JS中的代碼中，動態建立屬性，動態賦值的屬性。以下代碼片斷能夠在WebViewJavascriptBridge_JS中找到。

window.WebViewJavascriptBridge = {
  registerHandler: registerHandler,
  callHandler: callHandler,
  disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
  _fetchQueue: _fetchQueue,
  _handleMessageFromObjC: _handleMessageFromObjC
 };
複製代碼

而callHandler 內部調用了另外一個js function _doSend,而_doSend內部其實，就是把handlerName和 參數data，再加上callbackId 裝成鍵值對，而後保存到數組sendMessageQueue，同時加載一次wvjbscheme://__WVJB_QUEUE_MESSAGE__。 到此 利用WebViewJavascriptBridge實現JS 調用iOS Native 就完成了。

第六步、Native 調用 js 功能

Native 調用js 的功能，也須要先在js 中爲要調用的功能註冊一個別名。

6.1 js 註冊Native 要調用的功能

示例代碼：

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJSFunction', function(data, responseCallback) {
        alert('JS方法被調用:'+data);
        responseCallback('js執行過了');
     })
    // 註冊其餘的功能
    //bridge.regsiterHandler.....
})
複製代碼
6.2 Native 調用功能的別名handlerName

示例代碼：

//    // 若是不須要參數，不須要回調，使用這個
//    [_webViewBridge callHandler:@"testJSFunction"];
//    // 若是須要參數，不須要回調，使用這個
//    [_webViewBridge callHandler:@"testJSFunction" data:@"一個字符串"];
    // 若是既須要參數，又須要回調，使用這個
    [_webViewBridge callHandler:@"testJSFunction" data:@"一個字符串" responseCallback:^(id responseData) {
        NSLog(@"調用完JS後的回調：%@",responseData);
    }];
複製代碼

而callHandler 方法又是如何實現調用js 方法的呢？ callHandler 內部是將傳遞給js 的參數、handlerName、callbackId組合成字典，而後把字典轉換成字符串，將轉換後的字符串以參數的形式，經過stringByEvaluatingJavaScriptFromString傳遞給js ，js 中將傳遞過來的字符串轉成json ，而後經過handlerName 獲取對應的function執行。 關鍵的幾個代碼段：

// 這裏是Native 調用js ，把參數轉換爲字符串，執行js 中的_handleMessageFromObjC方法。
- (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];
    if ([[NSThread currentThread] isMainThread]) {
        [self _evaluateJavascript:javascriptCommand];

    } else {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [self _evaluateJavascript:javascriptCommand];
        });
    }
}
複製代碼

下面這裏是找到handlerName 對應的function，並執行function。

var handler = messageHandlers[message.handlerName];
    if (!handler) {
     console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
    } else {
     handler(message.data, responseCallback);
    }
複製代碼

到這裏 利用WebViewJavascriptBridge 實現Native 調用js 的功能就完成了。

提醒： JS 有動態參數的特性，調用js 的方法，能夠傳0個參數，1個參數，N個參數均可以。 例如，咱們在js中定義一個test()方法，咱們能夠調用test()，來執行這個方法；若是有參數要傳進來，也能夠調用test(xxx)；若是有多個參數，那麼就用test(xxx,xxx)。固然若是咱們定義的參數是test(a,b,c)，也能夠少傳參數，或者不傳參數調用test()。

總結

利用WebViewJavascriptBridge來實現JS與OC的交互的優勢：

一、獲取參數時，更方便一些，若是參數中有一些特殊符號或者url帶參數，可以很好的解析。

也有一些缺點：

一、作一次交互，須要執行的js 與原生的交互步驟較多，至少有兩次。

二、須要花較多的時間，理解WebViewJavascriptBridge的原理和使用步驟。

示例工程地址：JS_OC_WebViewJavascriptBridge

Have Fun!

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程