webview 與 JS 交互分為兩種：

• Android & iOS 調(diào)用 JS 的方法
• JS 調(diào)用 Android & iOS 的方法

Android & iOS 調(diào)用 JS 的方法，偽代碼如下：

• Android

  webView.loadUrl("javascript:show('xxx');");
  

• iOS

  NSString *result = [self.webView stringByEvaluatingJavaScriptFromString:@"showReturn('xxx');"];
  

webview 調(diào)用 JS 的方法比較簡單，show('xxx') 方法是 JS 中定義的一個方法：

<script language=javascript>
   function show(str) {
      alert(str);
   }
    
   function showReturn(str) {
      return "result";
   }
</script>

這種方式寥袭，缺陷很明顯：

1. Android 沒法拿到返回值；但是辨液，iOS是可以拿到返回值的，這是最重要的區(qū)別！Ｐ鸾鳌许溅！另外瓤鼻，我們也無法傳遞一個回調(diào)接口Callback用于回調(diào)，也就是說此方法調(diào)用成功與否贤重，是無法知道的茬祷。

2. show方法必須是 JS 中存在的，即使不存在你調(diào)用了也不會報錯并蝗；另外祭犯，隨著業(yè)務(wù)的增長，我們不得不增加許許多多類似show的方法滚停，來處理其他業(yè)務(wù)沃粗。

JS 調(diào)用 Android & iOS 的方法，偽代碼如下：

• Android

  private class JsToNative {
    // 沒有返回結(jié)果        
    @JavascriptInterface 
    public void jsMethod(String paramFromJS) { 
    
    } 
  
    // 有返回結(jié)果
    @JavascriptInterface 
    public String jsMethodReturn(String paramFromJS) { 
       return "your result";
    } 
  }
  
  // JsToNative就是一個別名键畴，你可以隨意
  webView.addJavascriptInterface(new JsToNative(), "JsToNative");
  

  JS 調(diào)用 Android

  // 沒有返回結(jié)果
  var paramFromJS = "xxx";
  window.JsToNative.jsMethod(paramFromJS);
  
  // 有返回結(jié)果
  var returnResult = window.JsToNative.jsMethodReturn(paramFromJS);
  

• iOS
  兩種方式：

  • JS 里面直接調(diào)用方法
  • JS 里面通過對象調(diào)用方法

方式一：JS 里面直接調(diào)用方法

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"jsMethod"] = ^() { 
        NSArray *args = [JSContext currentArguments];  
        for (id obj in args) {  
            NSLog(@"%@",obj);  
        } 
    }

    context[@"jsMethodReturn"] = ^() { 
        return "your result";
    }
}

JS 調(diào)用 iOS

// 沒有返回結(jié)果
var paramFromJS = "xxx";
jsMethod(paramFromJS);

// 有返回結(jié)果
var returnResult = jsMethodReturn(paramFromJS);

方式二：JS 里面通過對象調(diào)用方法

這種方式需要使用到 JSExport 協(xié)議陪每，類似Android的 @JavascriptInterface 注解。

由于篇幅原因镰吵，這里不做詳細(xì)講解檩禾，感興趣的同學(xué)可以參考：這里。

小結(jié)：

1. JS 都可以從 Android 和 iOS 方法拿到返回值疤祭，不存在Android 調(diào)用 JS 無法拿到返回值的情況盼产。
2. 弊端和前面類似，JS 事先需要知道 Android 和 iOS 的方法名（參數(shù)等）勺馆；另外戏售，隨著業(yè)務(wù)的增長，我們不得不增加更多的方法草穆，來處理其他業(yè)務(wù)灌灾。

思考：

1. 如何避免 JS、Android悲柱、iOS 相互調(diào)用時锋喜，需要事先“約定”方法名稱和參數(shù)？
2. 原生調(diào)用 JS 方法，能否類似原生開發(fā)一樣嘿般，使用 Callback（block） 做為回調(diào)方式段标？
3. JS 調(diào)用原生能否使用 function 獲得返回值?

iOS/OSX - WebViewJavascriptBridge

這是marcuswestin公司開源的一個用于 iOS/OSX 平臺 webview 與 JS 通信的方案，它在 webview 和 JS 之間“架了”一座橋梁炉奴，提供了非常便捷的通信方式逼庞，引用官方的介紹：

An iOS/OSX bridge for sending messages between Obj-C and JavaScript in UIWebViews/WebViews

此項目的star數(shù)量達(dá)到7600+，可見受歡迎程度非常高瞻赶，而且據(jù)說還有很多大公司的項目在使用赛糟，包括：

• Facebook Messenger
• Facebook Paper
• Yardsale
• EverTrue
• Game Insight
• Sush.io
• Imbed
• CareZone
• Hemlig
• Altralogica
• 鼎盛中華
• FRIL
• 留白·WHITE
• BrowZine

這個開源項目的用法也非常簡單，簡單的示例如下：

1. 注冊handler

Obj-C中注冊handler砸逊，給JS調(diào)用：

   self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
   [self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
      // 收到JS的調(diào)用
      NSLog(@"testObjcCallback called: %@", data);
      // 回調(diào)結(jié)果給JS
      responseCallback(@"Response from testObjcCallback");
   }];

JS中注冊handler璧南，給Obj-C調(diào)用（JS代碼）：

   bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
      // 收到Obj-C的調(diào)用
      log('ObjC called testJavascriptHandler with', data)
      var responseData = { 'Javascript Says':'Right back atcha!' }
      log('JS responding with', responseData)
      // 回調(diào)結(jié)果給Obj-C
      responseCallback(responseData)
   })

2. 根據(jù)第一步注冊的handler，發(fā)送消息
   第一步注冊的handler有兩個：testObjcCallback和testJavascriptHandler

Obj-C調(diào)用JS：

   [self.bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
      NSLog(@"testJavascriptHandler responded: %@", response);
   }];

JS調(diào)用Obj-C：

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

使用起來很簡單痹兜，主要就是使用registerHandler來注冊callback（block）穆咐，然后使用callHandler來調(diào)用注冊的callback（block）颤诀。

Obj-C與JS互調(diào)字旭，傳遞數(shù)據(jù)的格式為String，建議使用JSON格式崖叫，這樣更易于數(shù)據(jù)的交互遗淳。

關(guān)于WebViewJavascriptBridge更多詳細(xì)的配置和用法，請看這里心傀。

iOS/OSX平臺有這樣的Obj-C與JS交互方案屈暗，如果Android平臺也有類似的方案，豈不是更加完美脂男？

Android - JsBridge

感謝開源的力量养叛，已經(jīng)有人給出了類似的解決方案：

hi大頭鬼hi（lzyzsd），微博地址：http://weibo.com/brucefromsdu
JsBridge 開源地址：https://github.com/lzyzsd/JsBridge

據(jù)作者描述宰翅，是從JsBridge和微信的jsBridge file改造而來弃甥，加了一些新特性和修復(fù)了一些bug。

閱讀完整個開源項目之后汁讼，我驚訝的發(fā)現(xiàn)淆攻，關(guān)于 jsBridge 的設(shè)計居然和上文介紹的 WebViewJavascriptBridge 幾乎一模一樣。

唯一嘿架，也是最明顯的一個區(qū)別瓶珊，就是為了解決我們本文開始遇到的問題：

Android & iOS 調(diào)用 JS 的方法 - Android 沒法拿到返回值；但是耸彪，iOS是可以拿到返回值的伞芹。

為了解決這個問題，作者使用了 webview url 自定義的 schema 蝉娜，然后截取數(shù)據(jù)并攔截請求丑瞧。

jsBridge 差異部分柑土，關(guān)鍵代碼如下：

• iOS - jsBridge

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

• Android - jsBridge

  function _fetchQueue() {      
     var messageQueueString = JSON.stringify(sendMessageQueue);        
     sendMessageQueue = [];    
     // return messageQueueString;        
     // Android無法直接返回數(shù)據(jù), 這是與iOS最大的區(qū)別; 所以, 需要使用自定義url形式返回數(shù)據(jù)。     
     messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);   
  }
  

另外绊汹，jsBridge 的“加載時機(jī)”也有所不同稽屏，差異代碼如下：

• iOS - WebViewJavascriptBridge

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

iOS中，需要在你的web頁面的JS腳本中執(zhí)行這么一段方法西乖，然后在UIWebView的代理方法shouldStartLoadWithRequest攔截wvjbscheme://__BRIDGE_LOADED__類型的URL狐榔，然后加載 jsBridge：

iOS - jsBridge.png

• Android - JsBridge
  而Android中，不需要在web頁面引入那段JS方法获雕；只需要在WebViewClient的onPageFinished方法中加載 jsBridge：

Android - jsBridge.png

很明顯薄腻，Android 和 iOS 不同的平臺需要在 web 頁面引入的內(nèi)容有所不一樣；這樣届案，會導(dǎo)致 web 頁面開發(fā)人員需要根據(jù)不同的平臺分別處理庵楷。

既然，我們的初衷是想找到 Android 和 iOS 平臺同時都適用的方案楣颠，就必須解決這個問題尽纽。

為此，我改造了 大頭鬼 的JsBridge庫童漩，Android 使用了和 iOS - WebViewJavascriptBridge 的一致的 jsBridge 文件弄贿，唯一修改的方法是_fetchQueue()，正如前面提到的矫膨，為了解決：

Android & iOS 調(diào)用 JS 的方法 - Android 沒法拿到返回值差凹；但是，iOS是可以拿到返回值的侧馅。

同時危尿，需要和 iOS 一樣，在 web 頁面執(zhí)行一段 JS 方法馁痴。其他使用方式基本保持不變谊娇，這里感謝 大頭鬼 的代碼。

本來是從fork過來的代碼弥搞，但是改動比較多邮绿，所以就不提交給原作者了。

基本使用步驟和iOS的保持高度一致攀例，簡單示例如下：

1. 注冊handler

Android中注冊handler船逮，給JS調(diào)用：

   webView = (BridgeWebView) findViewById(R.id.webView);
   webView.registerHandler("testObjcCallback", new BridgeHandler() {
      @Override
      public void handler(String data, CallBackFunction function) {
         Log.i(TAG, "testObjcCallback called: " + data);
         function.onCallBack("Response from testObjcCallback");
      }
   });

JS中注冊handler，給Android調(diào)用（JS代碼）：

   bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
      log('ObjC called testJavascriptHandler with', data)
    var responseData = { 'Javascript Says':'Right back atcha!' }
    log('JS responding with', responseData)  
      responseCallback(responseData)
   })

2. 根據(jù)第一步注冊的handler粤铭，發(fā)送消息
   第一步注冊的handler有兩個：testObjcCallback和testJavascriptHandler

Android調(diào)用JS：

   webView.callHandler("testJavascriptHandler", "{\"foo\":\"before ready\"}", new CallBackFunction() {
      @Override
      public void onCallBack(String data) {

      }
   });

JS調(diào)用Android：

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

關(guān)于JsBridge更多詳細(xì)的配置和用法挖胃，請看這里。

有了這樣的兩個庫，可以很方便的讓我們在Android和iOS平臺與JS交互時酱鸭，使用一致的通信方案吗垮，較少了前端同學(xué)很多的適配工作。同時凹髓，也更符合原生的開發(fā)習(xí)慣烁登，并且忽略 jsBridge 層的存在。

最后蔚舀，附上兩個庫的地址

• 改造后的JsBridge庫: JsBridge
• iOS/OSX - WebViewJavascriptBridge庫: WebViewJavascriptBridge