webViewJavascriptBridge踩坑【页面刚开始bridge失效一阵】

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a928200728/article/details/80600163

对接安卓端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请求

展开阅读全文

没有更多推荐了,返回首页