目前H5與原生交互的主要方式：

攔截Webview請求的URL Schema

URL Schema是類URL的一種請求格式，可以自定義JSBridge通信的URL Schema，比如：jsbridge://showToast?text=hello ，Native對符合約定的URL進(jìn)行解析，拿到相關(guān)操作、操作，進(jìn)而調(diào)用原生Native的方法，主要有：

• a標(biāo)簽

• location.href

• 使用iframe.src

• 發(fā)送ajax請求
  但是，a標(biāo)簽需要用戶操作；location.href可能會引起頁面的跳轉(zhuǎn)丟失調(diào)用；發(fā)送ajax請求Android沒有相應(yīng)的攔截方法；所以使用iframe.src是比較好的方案。

  總結(jié)：針對這種攔截Webview請求的URL Schema的交互方式，雖然兼容性還行，但是基于URL的方式，長度受到限制而且不太直觀，數(shù)據(jù)格式有限制，而且建立請求有時(shí)間耗時(shí)。

JavascriptInterface

//對應(yīng)安卓端 android為原生自定義
javascript:android.getSomething()   
//對應(yīng)ios端 h5向原生發(fā)送消息msg
window.webkit.messageHandlers.getSomething.postMessage(msg)

//注冊供原生調(diào)用返回參數(shù)的方法
window.getSomething =（result）=>{
  console.log('原生給H5的數(shù)據(jù)內(nèi)容',result)
}

jsbridge

//定義與初始化 jsbridge.js
       //注冊事件監(jiān)聽，初始化
       function setupWebViewJavascriptBridge(callback) {
            if(isAndroid){
                 if (window.WebViewJavascriptBridge) {
                       callback(WebViewJavascriptBridge)
                 } else {
                     document.addEventListener(
                       'WebViewJavascriptBridgeReady'
                         , function() {
                         callback(WebViewJavascriptBridge)
                     },
                     false
                     );
                 }
           } 
        if(isIos){
          if (window.WebViewJavascriptBridge) { 
            return callback(window.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);
        }
       }

       //回調(diào)函數(shù)，接收數(shù)據(jù)
    if(isAndroid) setupWebViewJavascriptBridge(function(bridge) {
           //默認(rèn)接收  安卓原生初始化
        bridge.init(function(message, responseCallback) {
               var responseData = 'js默認(rèn)接收完畢，并回傳數(shù)據(jù)給java';
               responseCallback(responseData); //回傳數(shù)據(jù)給java
           });

           //注冊接收參數(shù)functionInJs名稱 與原生保持一致
         //  bridge.registerHandler("functionInJs", function(data, responseCallback) {
             //  console.log('接收到的數(shù)據(jù)',data);
             //  var responseData = 'js指定接收完畢，并回傳數(shù)據(jù)';
             //  responseCallback(responseData); //回傳數(shù)據(jù)
        //  });
       })

調(diào)用jsbridge

window.setupWebViewJavascriptBridge(bridge => {
// '原生函數(shù)名', "傳給原生端的數(shù)據(jù)", callback 回調(diào)函數(shù)
    bridge.callHandler('getSomething', data, (result) => {
        console.log(result);
    });
})

坑點(diǎn)：Android頁面首次調(diào)用jsbridge時(shí)，返回較慢，后續(xù)返回正常，暫未找出原因

• 補(bǔ)充，第三種方式，使用阿里的離線包容器（mPaaS離線包
  ，需端上配合），調(diào)用AlipayJSBridge，使用方式同jsbridge，詳情可以查看官方文檔 支付寶H5開放文檔，目前坑點(diǎn)是ios的導(dǎo)航欄左上按鈕返回back事件定義不生效，需端上配合設(shè)置