webViewJavascriptBridge踩坑【页面刚开始bridge失效一阵】
16lz
2022-05-21
对接安卓端webView遇到的问题,页面刚开始bridge会失效一段时间,在IOS上基本不会出现(没测到过)
网络上的Bridge.js代码
var u = navigator.userAgent, isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { if (!isAndroid) { 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) } else { document.addEventListener('WebViewJavascriptBridgeReady', function (event) { callback(WebViewJavascriptBridge) }, false) } }}connectWebViewJavascriptBridge(function (bridge) { if (isAndroid == true) { bridge.init(function (message, responseCallback) { responseCallback({'Javascript Responds': 'Wee!'}) }) }});// // 端发webview// bridge.registerHandler('blabla', function (data, responseCallback) {// });// webview 发端// window.WebViewJavascriptBridge.callHandler('closeWebView', {blabla: 'blabla'}, function (response) {// console.log('JS got response', response)// });
踩坑踩了一宿的我,从资源引用到每一块业务逻辑来回测了几遍,最后定位到是因为初始加载时调用的jquery的ajax请求会把
document.addEventListener('WebViewJavascriptBridgeReady', function (event) { callback(WebViewJavascriptBridge)}, false)
的"WebViewJavascriptBridgeReady"事件阻塞住,直到ajax的xhr请求结束才会轮到他触发(他触发后说明桥api已经通了)
最后改造了一下代码结构
document.addEventListener('WebViewJavascriptBridgeReady', function (event) { if(window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge); callback(WebViewJavascriptBridge) }, false)
在"WebViewJavascriptBridgeReady"事件里添加调用onWebViewJavascriptBridgeReady事件
一开始只等待"WebViewJavascriptBridgeReady"事件的触发
触发后在window.onWebViewJavascriptBridgeReady函数里调用ajax请求
更多相关文章
- Android快速开发框架dyh详解(三)---网络层的使用
- Android中调用Rest web服务
- Android(安卓)编程下 Touch 事件的分发和消费机制
- android中的Touch研究
- Android中设计具有背景图的按钮—ImageButton的焦点及事件处理
- Android中使用WebView, WebChromeClient和WebViewClient加载网页
- Android(安卓)之 ServiceManager与服务管理
- Android实现TextView部分文本监听单击事件
- Android(安卓)intent intent-filter 分类