HarmonyOS鸿蒙Next中如何利用web组件给html发消息？

HarmonyOS鸿蒙Next中如何利用web组件给html发消息？

Web组件可以调用JS方法

JS也可以调用Web组件方法

现在有个疑问，假如web组件发送个123，html如何处理能接受到。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<button onclick="htmlTest()">调用Web组件里面的方法</button>
<script type="text/javascript">
    function htmlTest() {
        str = objName.test("param from Html");
    }
</script>
</body>
</html>

如何修改这两段代码？

testObj = {
    test: (data) => {
        this.dataFromHtml = data;
        return "ArkUI Web Component";
    },
    toString: () => {
        console.log('Web Component toString');
        return "Web Component toString";
    }
}

build() {
    Column() {
        Text(this.dataFromHtml).fontSize(20)
        Button('refresh')
            .onClick(() => {
                try {
                    this.controller.refresh();
                } catch (error) {
                    console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
                }
            })
        Button('Register JavaScript To Window')
            .onClick(() => {
                try {
                    this.controller.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
                    this.controller.refresh();
                } catch (error) {
                    console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
                }
            })
        Web({ src: $rawfile('jstoweb.html'), controller: this.controller })
            .javaScriptAccess(true)
    }
}

更多关于HarmonyOS鸿蒙Next中如何利用web组件给html发消息？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以看下文档，

https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/web/web-app-page-data-channel.md/

更多关于HarmonyOS鸿蒙Next中如何利用web组件给html发消息？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过WebView组件的postMessage方法向HTML页面发送消息。首先，在HTML页面中监听message事件，然后在鸿蒙应用中通过WebView的postMessage方法发送消息。示例代码如下：

// HTML页面
window.addEventListener('message', function(event) {
    console.log('Received message:', event.data);
});

// 鸿蒙应用
webView.postMessage('Hello from HarmonyOS');

确保WebView已正确加载HTML页面，消息即可成功传递。

回到顶部