網頁H5與原生APP之間的通訊

原生APP中嵌套H5網頁，並且兩者之間需要數據相互傳遞，以下為實現代碼：

 

        // 1.1 獲取瀏覽器設備信息


        function getBrowser() {

            var userAgent = navigator.userAgent;
            var version = navigator.appVersion;
            var language = (navigator.browserLanguage || navigator.language).toLowerCase();

            // 瀏覽器信息
            var browser = {
                trident: userAgent.indexOf("Trident") > -1,
                presto: userAgent.indexOf("Presto") > -1,
                webKit: userAgent.indexOf("AppleWebKit") > -1,
                gecko: userAgent.indexOf("Gecko") > -1 && userAgent.indexOf("KHTML") == -1,
                mobile: !!userAgent.match(/AppleWebKit.*Mobile.*/),
                ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                android: userAgent.indexOf("Android") > -1 || userAgent.indexOf("Linux") > -1,
                iPhone: userAgent.indexOf("iPhone") > -1,
                iPad: userAgent.indexOf("iPad") > -1,
                webApp: userAgent.indexOf("Safari") == -1,
                language: language,
                version: version
            };

            return browser;
        };
        var browser = getBrowser();


        // 1.2 注冊WebViewJavascriptBridge


        function bridgeApp() {
            //注冊事件監聽，初始化
            function setupWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) {
                    callback(WebViewJavascriptBridge);
                } else {
                    document.addEventListener(
                        "WebViewJavascriptBridgeReady",
                        function () {
                            callback(WebViewJavascriptBridge);
                        },
                        false
                    );
                }
            };
            //回調函數，接收java發送來的數據
            setupWebViewJavascriptBridge(function (bridge) {
                connectWebViewJavascriptBridge(function (bridge) {

                    // 接收APP傳過來的數據
                    // 注冊一個方法（方法名是“registerJSmethod”），客戶端進行調用（方法名也是“registerJSmethod”），responseCallback是回調函數
                    bridge.registerHandler('registerJSmethod', function (data, responseCallback) {
                        console.log("registerJSmethod:", data)
                        responseCallback(data)
                    });

                    // 向原生APP傳遞的數據
                    //客戶端已經注冊好一個名為“registerOCmethod”的方法，H5直接進行調用（方法名也為“registerOCmethod”）就行，調用的時候可以傳客戶端需要的參數
                    bridge.callHandler('registerOCmethod', { 'key': 'value' }, function responseCallback(responseData) {
                        console.log("registerOCmethod:", responseData)
                    });
                })
            });
        };
        bridgeApp();


        // 1.3 向移動APP傳遞數據

        function sendMsg(data) {

            if (browser.android) {// android類型
                if (!window.WebViewJavascriptBridge || !window.WebViewJavascriptBridge.send) {
                    return;
                }
                window.WebViewJavascriptBridge.send(JSON.stringify(data));
            } else if (browser.ios) {// ios類型
                var iframe = document.getElementById('iframe');
                var url = "myapp:" + JSON.stringify(data);
                if (!iframe) {
                    iframe = document.createElement("iframe");
                    iframe.src = url;
                    iframe.setAttribute('id', 'iframe');
                    iframe.style.display = 'none';
                    document.body.appendChild(iframe);
                } else {
                    iframe.src = url;
                };
            };
        };