app內嵌H5網頁（webviewJavaScriptBridge）

標籤：model   android5   var   ios   echo   view   push   src   rem   

摘要：使用的外掛程式為webviewJavaScriptBridge，app端需要引入一下這個包，html頁面只需一段JS代碼 與IOS互動

<! 申明互動（此處代碼固定） >

 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 = ‘https://__bridge_loaded__‘;                 

        document.documentElement.appendChild(WVJBIframe);                 

        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)           

}

 

<!-- 處理互動  方法名要和ios內定義的對應-->

setupWebViewJavascriptBridge(function(bridge) {               

 

        bridge.registerHandler("showAlert", function(data) {   //ios調用js方法                       

               alert(data+",54646")                 

        });

        bridge.callHandler(‘objcEchoToJs‘, { foo:‘bar‘ }, function(response) { //js調用ios方法                     

 

               alert(‘收到回調:‘+response)

 

         })           

})  

與android互動

<! 申明互動（此處代碼固定） >

function connectWebViewJavascriptBridge(callback) {

                if (window.WebViewJavascriptBridge) {

                    callback(WebViewJavascriptBridge)

                } else {

                    document.addEventListener(‘WebViewJavascriptBridgeReady‘, function() {

                            callback(WebViewJavascriptBridge)

                    },false);

                }

}

 

<!-- 處理互動  方法名要和android內定義的對應-->

connectWebViewJavascriptBridge(function(bridge) {

            bridge.registerHandler("functionInJs", function(data, responseCallback) {   //android調用js方法

                alert(data);

            });

            bridge.callHandler(‘objcEchoToJs‘, {‘param‘: data } , function(responseData) {   //js調用android方法

                alert(responseData);

            });

 })

總結：互動聲明代碼固定，互動介面與IOS/android對應好即可（附：前端的registerHandler方法介面對應他們的callHandler，callHandler方法介面對應他們的registerHandler）

app內嵌H5網頁（webviewJavaScriptBridge）