WebViewJavascriptBridge詳細使用

blackbat1 8年前發布 | 143K 次閱讀 Objective-C開發 JavaScript

來自： http://www.henishuo.com/webviewjavascriptbridge-detail-use/

前言

WebViewJavascriptBridge是支持到iOS6之前的版本的，用于支持native的iOS與javascript交互。如果需要支持到iOS6之前的app，使用它是很不錯的。本篇講講WebViewJavascriptBridge的基本原理及詳細講講如何去使用，包括iOS端的使用和JS端的使用。

經過多番百度、Google，發現WebViewJavascriptBridge的資源講解不是翻譯官方文檔就是直接說官方提供的demo。但是筆者在寫這個demo時也遇到了不少問題，也想看看大家是怎么使用的，特別是JS端，弄了好久都沒有回調，原來是因為log。

寫下本篇文章，希望大家少走彎路吧！

本Demo效果圖

iOS與H5交互的方案

縱觀所有iOS與H5交互的方案，有以下幾種：

第一種：有很多的app直接使用在webview的代理中通過攔截的方式與native進行交互，通常是通過攔截url scheme判斷是否是我們需要攔截處理的url及其所對應的要處理的功能是什么。任意版本都支持。
第二種：iOS7之后出了JavaScriptCore.framework用于與JS交互，但是不支持iOS6，對于還需要支持iOS6的app，就不能考慮這個了。若需要了解，看最后的推薦閱讀。
第三種：WebViewJavascriptBridge開源庫使用，本質上，它也是通過webview的代理攔截scheme，然后注入相應的JS。
第四種：react-native，這個沒玩過（與前三種不同）。

本篇文章專講講WebViewJavascriptBridge。

WebViewJavascriptBridge的基本原理

我們看看WebViewJavascriptBridge.m中Webview代理攔截的代碼：

 
- (BOOL)webView:(UIWebView *)webViewshouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType {
    if (webView != _webView) { return YES; }
    NSURL *url = [requestURL];
    __strongWVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
    if ([_baseisCorrectProcotocolScheme:url]) {
        if ([_baseisBridgeLoadedURL:url]) {
            [_baseinjectJavascriptFile];
        } else if ([_baseisQueueMessageURL:url]) {
            NSString *messageQueueString = [self_evaluateJavascript:[_basewebViewJavascriptFetchQueyCommand]];
            [_baseflushMessageQueue:messageQueueString];
        } else {
            [_baselogUnkownMessage:url];
        }
        return NO;
    } else if (strongDelegate && [strongDelegaterespondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
        return [strongDelegatewebView:webViewshouldStartLoadWithRequest:requestnavigationType:navigationType];
    } else {
        return YES;
    }
}

在攔截后，通過先通過-isBridgeLoadedURL:方法判斷URL是否是需要bridge的URL，若是，則通過injectJavascriptFile方法注入JS；否則判斷URL是否是隊列消息，若是，則執行查詢命令JS并刷新消息隊列；最后，URL被識別為未知的消息。

JS端如何使用

下面是本demo的HTML完整代碼：

 
<!doctypehtml>
<html>
  <head>
  <metaname="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <styletype='text/css'>
      html{ font-family:Helvetica; color:#222; }
      h1{ color:steelblue; font-size:24px; margin-top:24px; }
      button{ margin:0 3px 10px; font-size:12px; }
      .logLine{ border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
    </style>
  </head>
  
  <body>
    <h1>WebViewJavascriptBridge Demo</h1>
    
    <script>
      window.onerror = function(err) {
        log('window.onerror: ' + err)
      }
    
      /*這段代碼是固定的，必須要放到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)
      }
    
      /*與OC交互的所有JS方法都要放在此處注冊，才能調用通過JS調用OC或者讓OC調用這里的JS*/
      setupWebViewJavascriptBridge(function(bridge) {
      var uniqueId = 1
      function log(message, data) {
        var log = document.getElementById('log')
        var el = document.createElement('div')
        el.className = 'logLine'
        el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
        if (log.children.length) {
            log.insertBefore(el, log.children[0])
        } else {
          log.appendChild(el)
        }
      }
      /* Initialize your app here */
      
      /*我們在這注冊一個js調用OC的方法，不帶參數，且不用ObjC端反饋結果給JS：打開本demo對應的博文*/
      bridge.registerHandler('openWebviewBridgeArticle', function() {
          log("openWebviewBridgeArticle was called with by ObjC")
      })
      /*JS給ObjC提供公開的API，在ObjC端可以手動調用JS的這個API。接收ObjC傳過來的參數，且可以回調ObjC*/
      bridge.registerHandler('getUserInfos', function(data, responseCallback) {
        log("Get user information from ObjC: ", data)
        responseCallback({'userId': '123456', 'blog': '標哥的技術博客'})
      })
                                  
      /*JS給ObjC提供公開的API，ObjC端通過注冊，就可以在JS端調用此API時，得到回調。ObjC端可以在處理完成后，反饋給JS，這樣寫就是在載入頁面完成時就先調用*/
      bridge.callHandler('getUserIdFromObjC', function(responseData) {
        log("JS call ObjC's getUserIdFromObjC function, and js received response:", responseData)
      })
 
      document.getElementById('blogId').onclick = function (e) {
        log('js call objc: getBlogNameFromObjC')
        bridge.callHandler('getBlogNameFromObjC', {'blogURL': 'http://www.henishuo.com'}, function(response) {
                          log('JS got response', response)
                          })
      }
    })
      
    </script>
    
    <divid='buttons'></div> <divid='log'></div>
    
    <div>
      <inputtype="button" value="getBlogNameFromObjC" id="blogId"/>
    </div>
  </body>
</html>

在JS端，嵌入步驟是：

第一步：將下面的代碼放在JS中：

 
/*這段代碼是固定的，必須要放到js中*/
functionsetupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    varWVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

這段代碼是固定的，必須要放到js中。

第二步：在下面的方法體里寫相關JS代碼：

 
setupWebViewJavascriptBridge(function(bridge) {
    /* Initialize your app here */
    所有與iOS交互的JS代碼放這里！
})

JS如何調用iOS代碼

通過bridge.callHandler來調用：

 
bridge.callHandler('getBlogNameFromObjC', 
                {'blogURL': 'http://www.henishuo.com'}, 
                functioncallback(response) {
                  log('JS got response', response)
                }
})

其中，各參數說明如下：

getBlogNameFromObjC：是iOS端register的handleName，在iOS端注冊后，JS就可以直接通過這個handleName與iOS交互。比如，當點擊某個按鈕時，就執行上面這一段代碼，結果就是js端將參數傳給了iOS端，iOS端收到參數，然后通過回調給js，js會收到response，然后打印出來
{‘blogURL’: ‘ http://www.henishuo.com’}：這是JSON字符串，傳到iOS端會被WebViewJavascriptBridge自動轉換成id對象，然后在回調處看到的就是字典對象了。
callback：這是個js函數名，在iOS端收到回調后，拿到了參數，然后通過閉包回調反饋給js端，這個反饋就是通過callback函數來傳值給js。

JS端加入WebViewJavascriptBridge代碼注意事項

如果在下面的函數體內有任何錯誤，都不會有打印日志，也不會有任何回調：

 
setupWebViewJavascriptBridge(function(bridge) {
    /* Initialize your app here */
    所有與iOS交互的JS代碼放這里！
})

因此，如果遇到什么也沒有輸出，說明你寫錯了。另外，上面有demo中，log函數是自定義的，不是系統的，因此如果沒有加入這個函數的定義，調用它也會導致不能交互。

iOS端如何使用

第一步：開啟日志

 
// 開啟日志，方便調試
[WebViewJavascriptBridge enableLogging];

第二步：給ObjC與JS建立橋梁

 
// 給哪個webview建立JS與OjbC的溝通橋梁
self.bridge = [WebViewJavascriptBridgebridgeForWebView:webView];
 
// 設置代理，如果不需要實現，可以不設置
[self.bridgesetWebViewDelegate:self];

第三步：注冊HandleName，用于給JS端調用iOS端

 
// JS主動調用OjbC的方法
// 這是JS會調用getUserIdFromObjC方法，這是OC注冊給JS調用的
// JS需要回調，當然JS也可以傳參數過來。data就是JS所傳的參數，不一定需要傳
// OC端通過responseCallback回調JS端，JS就可以得到所需要的數據
[self.bridgeregisterHandler:@"getUserIdFromObjC"handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"js call getUserIdFromObjC, data from js is %@", data);
    if (responseCallback) {
      // 反饋給JS
      responseCallback(@{@"userId": @"123456"});
    }
}];
  
[self.bridgeregisterHandler:@"getBlogNameFromObjC"handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
    if (responseCallback) {
      // 反饋給JS
      responseCallback(@{@"blogName": @"標哥的技術博客"});
    }
}];

第四步：直接調用JS端注冊的HandleName

 
[self.bridgecallHandler:@"getUserInfos"data:@{@"name": @"標哥"}responseCallback:^(id responseData) {
    NSLog(@"from js: %@", responseData);
}];

源代碼

大家可以到GITHUB下載源代碼，喜歡就隨手給個Star： WebViewJavascriptBridgeDemo

最后

由于很多朋友不太會使用這個庫，再加上群里的小伙伴們經常問這個問題，因此決定寫一篇文章來教大家如何去使用。其實在此之前，筆者也沒有使用過這個東西。

使用這個庫有什么缺點？最明顯的就是要固定加入相關代碼，而且JS代碼要放在固定的函數內添加。那么安卓端是否也支持這樣呢？如果不支持，那么H5端要分別判斷ios、安卓？由于沒有在公司使用過，因此只能帶著這些疑問，究竟是否通用。

如果大家在公司使用過，那么一定了解安卓是否兼容。還請大家給筆者在評論中說說！謝謝！

關注我

<th width="26%">賬號</th>

<th width="45%">備注</th>

</tr>

</thead>

<td>324400294（滿）</td>

<td>群一若已滿，請申請群二</td>

</tr>

</tbody>

</table> </div>

本文由用戶 blackbat1 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1457508380203.html

Objective-C開發 JavaScript

關注
標哥博客iOS交流群一
標哥博客iOS交流群二	494669518（滿）	群二若已滿，請申請群三
標哥博客iOS交流群三	461252383（滿）	群三若已滿，請申請群四
標哥博客iOS交流群四	250351140	群四若已滿，會有提示信息
關注微信公眾號	iOSDevShares	關注微信公眾號，會定期地推送好文章
關注新浪微博賬號	標哥的技術博客	關注微博，每次發布文章都會分享到新浪微博
關注標哥的GitHub	CoderJackyHuang	這里有很多的Demo和開源組件
關于我	進一步了解標哥	如果覺得文章對您很有幫助，可捐助我！

WebViewJavascriptBridge詳細使用

前言

本Demo效果圖

iOS與H5交互的方案

WebViewJavascriptBridge的基本原理

JS端如何使用

JS如何調用iOS代碼

JS端加入WebViewJavascriptBridge代碼注意事項

iOS端如何使用

源代碼

最后

推薦閱讀

關注我

相關經驗

相關資訊

相關文檔

目錄