聊一聊 webview 與 JS 交互方案 - 適用 Android & iOS

JayBacon 7年前發布 | 17K 次閱讀 iOS開發移動開發 JavaScript

webview 與 JS 交互分為兩種：

Android & iOS 調用 JS 的方法
JS 調用 Android & iOS 的方法

Android & iOS 調用 JS 的方法，偽代碼如下：

Android

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

iOS

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

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

<script language=javascript>
   function show(str) {
      alert(str);
   }

   function showReturn(str) {
      return "result";
   }
</script>

這種方式，缺陷很明顯：

Android 沒法拿到返回值；但是，iOS是可以拿到返回值的，這是最重要的區別！！！另外，我們也無法傳遞一個回調接口 Callback 用于回調，也就是說此方法調用成功與否，是無法知道的。
show 方法必須是 JS 中存在的，即使不存在你調用了也不會報錯；另外，隨著業務的增長，我們不得不增加許許多多類似 show 的方法，來處理其他業務。

JS 調用 Android & iOS 的方法，偽代碼如下：

Android

private class JsToNative {
  // 沒有返回結果        
  @JavascriptInterface 
  public void jsMethod(String paramFromJS) { 

  } 

  // 有返回結果
  @JavascriptInterface 
  public String jsMethodReturn(String paramFromJS) { 
     return "your result";
  } 
}

// JsToNative就是一個別名，你可以隨意
webView.addJavascriptInterface(new JsToNative(), "JsToNative");

JS 調用 Android

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

// 有返回結果
var returnResult = window.JsToNative.jsMethodReturn(paramFromJS);

iOS

兩種方式：
- JS 里面直接調用方法
- JS 里面通過對象調用方法

方式一：JS 里面直接調用方法

- (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 調用 iOS

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

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

方式二：JS 里面通過對象調用方法

這種方式需要使用到 JSExport 協議，類似Android的 @JavascriptInterface 注解。

由于篇幅原因，這里不做詳細講解，感興趣的同學可以參考：這里。

小結：

JS 都可以從 Android 和 iOS 方法拿到返回值，不存在Android 調用 JS 無法拿到返回值的情況。
弊端和前面類似，JS 事先需要知道 Android 和 iOS 的方法名（參數等）；另外，隨著業務的增長，我們不得不增加更多的方法，來處理其他業務。

思考：

如何避免 JS、Android、iOS 相互調用時，需要事先“約定”方法名稱和參數？
原生調用 JS 方法，能否類似原生開發一樣，使用 Callback（block）做為回調方式？
JS 調用原生能否使用 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 數量達到 7600+ ，可見受歡迎程度非常高，而且據說還有很多大公司的項目在使用，包括：

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

注冊handler

Obj-C中注冊handler，給JS調用：

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

JS中注冊handler，給Obj-C調用（JS代碼）：

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

根據第一步注冊的 handler ，發送消息

第一步注冊的 handler 有兩個： testObjcCallback 和 testJavascriptHandler

Obj-C調用JS：

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

JS調用Obj-C：

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

使用起來很簡單，主要就是使用 registerHandler 來注冊 callback（block），然后使用 callHandler 來調用注冊的 callback（block）。

Obj-C與JS互調，傳遞數據的格式為String，建議使用JSON格式，這樣更易于數據的交互。

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

Android - JsBridge

感謝開源的力量，已經有人給出了類似的解決方案：

閱讀完整個開源項目之后，我驚訝的發現，關于 jsBridge 的設計居然和上文介紹的 WebViewJavascriptBridge 幾乎一模一樣。

唯一，也是最明顯的一個區別，就是為了解決我們本文開始遇到的問題：

Android & iOS 調用 JS 的方法 - Android 沒法拿到返回值；但是，iOS是可以拿到返回值的。

為了解決這個問題，作者使用了 webview url 自定義的 schema ，然后截取數據并攔截請求。

jsBridge差異部分，關鍵代碼如下：

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無法直接返回數據, 這是與iOS最大的區別; 所以, 需要使用自定義url形式返回數據。     
   messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);   
}

另外， jsBridge 的“加載時機”也有所不同，差異代碼如下：

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腳本中執行這么一段方法，然后在UIWebView的代理方法 shouldStartLoadWithRequest 攔截 wvjbscheme://__BRIDGE_LOADED__ 類型的URL，然后加載 jsBridge：

iOS - jsBridge.png

Android - JsBridge

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

Android - jsBridge.png

很明顯，Android 和 iOS 不同的平臺需要在 web 頁面引入的內容有所不一樣；這樣，會導致 web 頁面開發人員需要根據不同的平臺分別處理。

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

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

Android & iOS 調用 JS 的方法 - Android 沒法拿到返回值；但是，iOS是可以拿到返回值的。

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

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

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

注冊handler

Android中注冊handler，給JS調用：

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調用（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)
})

根據第一步注冊的 handler ，發送消息

第一步注冊的 handler 有兩個： testObjcCallback 和 testJavascriptHandler

Android調用JS：

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

   }
});

JS調用Android：

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

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

最后，附上兩個庫的地址

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

來自：http://www.jianshu.com/p/c565c8f93abd

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

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

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

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

iOS開發移動開發 JavaScript

聊一聊 webview 與 JS 交互方案 - 適用 Android & iOS

相關經驗

相關資訊

相關文檔

目錄