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‘一直找不到
2 回复
js如何和webview通信方式就是你看到的方式,关于 javaScriptProxy方法里的参数object, name, methodList要与js保持一致,可参考以下链接:
// 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中,通过@kit.ArkWeb
模块引入的webview
组件进行JavaScript与webview之间的通信,通常可以使用postMessage API进行消息传递。具体实现步骤如下:
-
在webview中监听消息:
- 在webview加载的HTML页面中,使用
window.addEventListener('message', handler, false)
来监听来自外部的消息。
- 在webview加载的HTML页面中,使用
-
从JavaScript发送消息到webview:
- 在ArkUI的JS代码中,通过webview组件实例的
postMessage
方法发送消息。例如,webview.postMessage({key: 'value'})
。
- 在ArkUI的JS代码中,通过webview组件实例的
-
从webview发送消息到外部JavaScript:
- 在webview加载的HTML页面中,使用
window.parent.postMessage({key: 'value'}, '*')
发送消息到外部。这里的window.parent
指向的是包含webview的ArkUI环境。
- 在webview加载的HTML页面中,使用
-
处理消息:
- 在ArkUI的JS代码中,同样使用
window.addEventListener('message', handler, false)
来监听来自webview的消息。
- 在ArkUI的JS代码中,同样使用
确保在发送和接收消息时,消息的格式和内容符合双方的约定,以避免通信失败或数据解析错误。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html