美文网首页
混合APP利用js bridge进行交互

混合APP利用js bridge进行交互

作者: pengANDpeng | 来源:发表于2018-12-07 14:39 被阅读0次
let ua = navigator.userAgent,
    client = {
        isAndroid: /Android/i.test(ua),
        isIos: /iPhone|iPod|iPad/i.test(ua),
        isWx: /MicroMessenger/i.test(ua),
        isMobile: /AppleWebKit.*Mobile/i.test(ua),
    };
// for ios
function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(window.WebViewJavascriptBridge)
    }
    if (window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback)
    }
    window.WVJBCallbacks = [callback]
    let WVJBIframe = document.createElement('iframe')
    WVJBIframe.style.display = 'none'
    WVJBIframe.src = 'https://__bridge_loaded__'
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(() => {
        document.documentElement.removeChild(WVJBIframe)
    }, 0)
}

//for android
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function () {
                callback(WebViewJavascriptBridge)
            },
            false
        );
    }
}

export default {
    //js调用原生方法
    callhandler(name, data, callback) {
        if (client.isIos) {
            setupWebViewJavascriptBridge(function (bridge) {
                bridge.callHandler(name, data, callback)
            })
        } else {
            connectWebViewJavascriptBridge(function (bridge) {
                bridge.callHandler(name, data, callback)
            })
        }       
    },
    //js注册方法提供给原生调用
    registerhandler(name, callback) {
        if (client.isIos) {
            setupWebViewJavascriptBridge(function (bridge) {
                bridge.registerHandler(name, function (data, responseCallback) {
                    callback(data, responseCallback)
                })
            })
        } else {
            connectWebViewJavascriptBridge(function (bridge) {
                bridge.registerHandler(name, function (data, responseCallback) {
                    callback(data, responseCallback)
                })
            })
        }
    }
}

相关文章

网友评论

      本文标题:混合APP利用js bridge进行交互

      本文链接:https://www.haomeiwen.com/subject/ysuthqtx.html