HarmonyOS 鸿蒙Next 在鸿蒙 import { webview } from '@kit.ArkWeb'中 js如何和webview通信？

HarmonyOS 鸿蒙Next 在鸿蒙 import { webview } from '@kit.ArkWeb’中 js如何和webview通信？

在鸿蒙 import { webview } from '@kit.ArkWeb’中 js如何和webview如何通信？IOS 中 [web addScriptMessageHandler:self name:@“eventName”];添加监听 ，代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 即可拿到 message.name = ’eventName‘ 事件 ；有尝试使用// Web组件加载本地index.html页面 Web({ src: $rawfile(‘index.html’), controller: this.webviewController}) // 将对象注入到web端 .javaScriptProxy({ object: this.testObj, name: “testObjName”, methodList: [“eventName”], controller: this.webviewController }) } } ，加载的是压缩后的 .html,这个 ’testObjName‘一直找不到 


更多关于HarmonyOS 鸿蒙Next 在鸿蒙 import { webview } from '@kit.ArkWeb'中 js如何和webview通信？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

  js如何和webview通信方式就是你看到的方式，关于 javaScriptProxy方法里的参数object, name, methodList要与js保持一致，可参考以下链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#javascriptproxy12

// xxx.ets
import { webview } from '[@kit](/user/kit).ArkWeb';
import { BusinessError } from '[@kit](/user/kit).BasicServicesKit';

class ObjOther {
 methodNameListForJsProxy: string[]

 constructor(list: string[]) {
   this.methodNameListForJsProxy = list
 }

 testOther(json: string): void {
   console.info(json)
 }
}

class testClass {
 ObjReturn: ObjOther

 constructor() {
   this.ObjReturn = new ObjOther(["testOther"]);
 }

 test(): ESObject {
   return this.ObjReturn
 }

 toString(param: string): void {
   console.log('Web Component toString' + param);
 }
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 webviewController: webview.WebviewController = new webview.WebviewController();
 [@State](/user/State) testObj: testClass = new testClass();

 build() {
   Column() {
     Button('refresh')
       .onClick(() => {
         try {
           this.webviewController.refresh();
         } catch (error) {
           console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
         }
       })
     Button('Register JavaScript To Window')
       .onClick(() => {
         try {
           this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
         } catch (error) {
           console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
         }
       })
     Web({ src: $rawfile('index.html'), controller: this.webviewController })
   }
 }
}

更多关于HarmonyOS 鸿蒙Next 在鸿蒙 import { webview } from '@kit.ArkWeb'中 js如何和webview通信？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，通过@kit.ArkWeb模块引入的webview组件进行JavaScript与webview之间的通信，通常可以使用postMessage API进行消息传递。具体实现步骤如下：

  1. 在webview中监听消息：

    • 在webview加载的HTML页面中，使用window.addEventListener('message', handler, false)来监听来自外部的消息。

  2. 从JavaScript发送消息到webview：

    • 在ArkUI的JS代码中，通过webview组件实例的postMessage方法发送消息。例如，webview.postMessage({key: 'value'})。

  3. 从webview发送消息到外部JavaScript：

    • 在webview加载的HTML页面中，使用window.parent.postMessage({key: 'value'}, '*')发送消息到外部。这里的window.parent指向的是包含webview的ArkUI环境。

  4. 处理消息：

    • 在ArkUI的JS代码中，同样使用window.addEventListener('message', handler, false)来监听来自webview的消息。

确保在发送和接收消息时，消息的格式和内容符合双方的约定，以避免通信失败或数据解析错误。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部