网页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;
                };
            };
        };