首页 > 移动平台 > 详细

app内嵌H5网页(webviewJavaScriptBridge)

时间:2018-01-23 20:06:49      阅读:284      评论:0      收藏:0      [点我收藏+]

摘要:使用的插件为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)

原文:https://www.cnblogs.com/YmmY/p/8337051.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!