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

最新推荐文章于 2024-06-12 15:55:35 发布

CNCFOX

最新推荐文章于 2024-06-12 15:55:35 发布

阅读量3.6k

点赞数 1

分类专栏： Android基础文章标签： android ios javascript

本文链接：https://blog.csdn.net/u013501637/article/details/52790515

版权

Android基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

注册监听事件

这段代码是固定的，必须要放到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>