Android 和 IOS 使用 jsBridge 进行交互方法

来源：互联网发布：盯盯是什么软件编辑：程序博客网时间：2024/05/16 04:14

注册监听事件

这段代码是固定的，必须要放到js中

    if (window.WebViewJavascriptBridge) {        callback(WebViewJavascriptBridge)    } else {        document.addEventListener(            'WebViewJavascriptBridgeReady'            , function() {                callback(WebViewJavascriptBridge)            },            false        );    }    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }    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)}

原生调用js

在 setupWebViewJavascriptBridge 中注册原生调用的js

//在改function 中添加原生调起js方法setupWebViewJavascriptBridge(function(bridge) {    bridges = bridge;    //注册原生调起方法    //参数1： buttonjs 注册flag 供原生使用，要和原生统一    //参数2： data  是原生传给js 的数据    //参数3： responseCallback 是js 的回调，可以通过该方法给原生传数据    bridge.registerHandler("buttonjs",function(data,responseCallback){        document.getElementById("show").innerHTML = "buuton js" + data;        responseCallback("button js callback");    });})

js 调用原生方法

注：该方法应放在setupWebViewJavascriptBridge 中进行绑定

document.getElementById('enter3').onclick = function (e) {var data = "good hello"//参数1： pay 注册flag 供原生使用，要和原生统一//参数2： 是调起原生时向原生传递的参数//参数3： 原生调用回调返回的数据bridge.callHandler('getBlogNameFromObjC',data,function(resp){        document.getElementById("show").innerHTML = "payInterface" + resp;    } );

完整代码

<html><head>    <meta content="text/html; charset=utf-8" http-equiv="content-type">    <title>        js调用java    </title></head><body><p>    <div id="show"></div></p><p><input type="button" id="enter3" value="payInterface" onclick="payInterface();"/></p></body><script>        function setupWebViewJavascriptBridge(callback) {            if (window.WebViewJavascriptBridge) {                callback(WebViewJavascriptBridge)            } else {                document.addEventListener(                    'WebViewJavascriptBridgeReady'                    , function() {                        callback(WebViewJavascriptBridge)                    },                    false                );            }            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }            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)        }        //在改function 中添加原生调起js方法        setupWebViewJavascriptBridge(function(bridge) {            //注册原生调起方法            //参数1： buttonjs 注册flag 供原生使用，要和原生统一            //参数2： data  是原生传给js 的数据            //参数3： responseCallback 是js 的回调，可以通过该方法给原生传数据            bridge.registerHandler("getUserInfos",function(data,responseCallback){                document.getElementById("show").innerHTML = "buuton js" + data;                responseCallback("button js callback");            });            document.getElementById('enter3').onclick = function (e) {            var data = "hello"            //参数1： pay 注册flag 供原生使用，要和原生统一            //参数2： 是调起原生时向原生传递的参数            //参数3： 原生调用回调返回的数据            bridge.callHandler('getBlogNameFromObjC',data,function(resp){                    document.getElementById("show").innerHTML = "payInterface" + resp;                }             );        }        })</script></html>

1 0