h5 js 调用安卓 IOS方法 demo

原创已于 2022-04-27 17:31:07 修改 · 917 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-27 17:25:40 首次发布

H5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML5和WebChannel在APP与网页间进行交互，重点讲解了在Android和iOS环境下，如何分别监听来自Java或原生代码的定位数据。通过实例展示了如何注册特定事件处理函数，以及在按钮点击事件中触发数据交换过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        
        button {
            margin-top: 20px;
            margin-bottom: 20px;
            border:2px solid orange;
            width: 44%;
            height: 44px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>APP与网页交互测试：</div>
    <div>
        <button type="button"  class="btn" onclick="btnAction1()">获取定位</button>
        <div>
            <xmp id="show">
                </xmp>
            </div>
    </div>
</body>
</html>

<script>
    // 调用方法：VEMessage
    // 监听方法：WebChannelMessageToContent
    var msgID = 1000
    const u = navigator.userAgent
    const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
    // 监听APP to Web
    if (isAndroid) {
        //回调函数，接收java发送来的数据
        setupWebViewJavascriptBridge(function(bridge) {
            //默认接收
            //    bridge.init(function(message, responseCallback) {
            //        document.getElementById("show").innerHTML = '默认接收到Java的数据： ' + message;

            //        var responseData = 'js默认接收完毕，并回传数据给java';
            //        responseCallback(responseData); //回传数据给java
            //    });
           //指定接收，参数functionInJs 与java保持一致
           bridge.registerHandler("WebChannelMessageToContent", function(data, responseCallback) {
               document.getElementById("show").innerHTML = '指定接收到Java的数据： ' + data;
               var responseData = 'js指定接收完毕，并回传数据给java';
               responseCallback(responseData); //回传数据给java
           });
        })
    } else {
        // IOS
        window.addEventListener('WebChannelMessageToContent',function(event){
            document.getElementById("show").innerHTML = ("接收值：" + event);
            let cmd = event.detail["command"]
            if (cmd == "message:location") {
                alert(JSON.stringify(event.detail["data"]))
            }
        }, false);
    }
    
    function btnAction1() {
        msgID += 1
        var msg = {
            "messageId":msgID,
            "command":"message:location",
            "data":{}
        }
        callAppp(msg)
    }
    
    function callAppp(data) {
        if (isAndroid) {
            // 安卓
            window.WebViewJavascriptBridge.callHandler('VEMessage',data, function(responseData) {});
        } else {
            // 苹果
            window.webkit.messageHandlers.VEMessage.postMessage(data)
        }
    }

    //安卓注册事件监听，初始化
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function() {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }
</script>

每天一个新知识，一起加油吧！