AndroidIOS与H5 jsbridge 相互调用推荐方式

概述移动端插件IOS：https://github.com/marcuswestin/WebViewJavascriptBridgeIOS(new):https://github.com/Lision/WKWebViewJavascriptBridgeAndroid：https://github.com/lzyzsd/JsBridgeH5调用封装varu=navigator.userAgent;window.isAndroid=u.indexOf('Android') 移动端插件IOS：https://github.com/marcuswestin/WebViewJavascriptBridgeIOS(new): https://github.com/Lision/WKWebViewJavascriptBridgeAndroID：https://github.com/lzyzsd/JsBridgeH5调用封装

var u = navigator.userAgent;window.isAndroID = u.indexOf('AndroID') > -1 || u.indexOf('Adr') > -1; //androID终端 window.isIOS = !!u.match(/\(i[^;]+;( U;)? @R_301_6947@.+Mac OS X/); //ios终端 window.JsbrIDge = function (callback) {    if (window.WebVIEwJavaScriptBrIDge) {        return callback(WebVIEwJavaScriptBrIDge);    } else {        document.addEventListener(            'WebVIEwJavaScriptBrIDgeReady',            function () {                callback(WebVIEwJavaScriptBrIDge)            },            false        );    }    if (window.isIOS) {        // old ios method        //setTimeout(function () {        //    if (window.WVJBCallbacks) {        //        return window.WVJBCallbacks.push(callback);        //    }        //}, 500)        //window.WVJBCallbacks = [callback];        //var WVJBiframe = document.createElement('iframe');        //WVJBiframe.style.display = 'none';        //WVJBiframe.src = 'wvjbscheme://__BRIDGE_LOADED__';        //document.documentElement.appendChild(WVJBiframe);        //setTimeout(function () {        //    document.documentElement.removeChild(WVJBiframe)        //}, 0)        // new ios method        if (window.WKWebVIEwJavaScriptBrIDge) { return callback(WKWebVIEwJavaScriptBrIDge); }        if (window.WKWVJBCallbacks) { return window.WKWVJBCallbacks.push(callback); }        window.WKWVJBCallbacks = [callback];        window.webkit.messageHandlers.iOS_Native_InjectJavaScript.postMessage(null)    }}if (!window.isIOS) {    JsbrIDge(function (brIDge) {        brIDge.init(function (message, responseCallback) {            var data = {};            responseCallback(data);        });    })}/** * @param  {option对象} * method: 调用的方法 * data: 传递的参数 * callback: 回掉方法 * @return {[type]} */function brIDgeCallHandler(option) {    // alert(option.method)    JsbrIDge(function (brIDge) {        brIDge.callHandler(            option.method,            option.data || {},            function (responseData) {                if (option.callback) {                    option.callback(responseData)                }            }        );    })}//原生调Jswindow.brIDgeRegisterHandler = function (option) {    // alert(option.method);    JsbrIDge(function (brIDge) {        brIDge.registerHandler(            option.method,            function (data, responseCallback) {                if (option.callback) {                    option.callback(data);                }                responseCallback(option.data || {});            }        );    })}/** * 传入的option对象格式 * { *    method:[String], *    data:[Object], *    callback:[Function] * } */window.callNativePage = function (option) {    brIDgeCallHandler({        method: 'callNativePage',        data: option.data,        callback: function (responseData) {            if (option.callback) {                option.callback(responseData);            }        }    })}

调用示例Js 调用原生

callNativePage({    data: { msg : 'test send msg' },    callback:function(responseData){        console.log('来源于原生的反馈信息',responseData)    }})

 

原生调用 Js 方法，需主动注册

window.brIDgeRegisterHandler({    method:"提供给原生调用的方法名",    callback:function(data){        // data : 原生传递给前端的data    }})

总结

以上是内存溢出为你收集整理的Android/IOS与H5 jsbridge 相互调用推荐方式全部内容，希望文章能够帮你解决Android/IOS与H5 jsbridge 相互调用推荐方式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。