无人视频在线观看免费播放影院,性色av无码不卡中文字幕,免费女人高潮流视频在线

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+，可見受歡迎程度非常高，而且據說還有很多大公司的項目在使用，包括：

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

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

注冊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格式，這樣更易于數據的交互。

關于WebViewJavascriptBridge更多詳細的配置和用法，請看這里。

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

Android - JsBridge

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

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

據作者描述，是從JsBridge和微信的jsBridge file改造而來，加了一些新特性和修復了一些bug。

閱讀完整個開源項目之后，我驚訝的發現，關于 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)
})

關于JsBridge更多詳細的配置和用法，請看這里。

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

最后，附上兩個庫的地址

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

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

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

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

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

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频