My body
- - + +display received message send from ets
+ + ``` ```js //xxx.js var h5Port; +var output = document.querySelector('.output'); window.addEventListener('message', function (event) { if (event.data == '__init_port__') { if (event.ports[0] != null) { - h5Port = event.ports[0]; + h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 h5Port.onmessage = function (event) { - console.log('receive message from ets, on message:' + event.data); + // 2. 接收ets侧发送过来的消息. + var msg = 'Got message from ets:' + event.data; + output.innerHTML = msg; } } } }) -function PostWebMsg(data) { +// 3. 使用h5Port往ets侧发送消息. +function PostMsgToEts(data) { h5Port.postMessage(data); } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md index cfc799864db233086458ac6106bc3670b4d4e12b..df6e8b8f121fc9a3758a7b4fe6b91ca14d3546c2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -123,7 +123,7 @@ domStorageAccess(domStorageAccess: boolean) fileAccess(fileAccess: boolean) -设置是否开启应用中文件系统的访问，默认启用。[$rawfile(filepath/filename)](../../ui/ts-resource-access.md)中rawfile路径的文件不受该属性影响而限制访问。 +设置是否开启应用中文件系统的访问，默认启用。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。 **参数：** @@ -152,7 +152,7 @@ fileAccess(fileAccess: boolean) fileFromUrlAccess(fileFromUrlAccess: boolean) -设置是否允许通过网页中的JavaScript脚本访问应用文件系统中的内容，默认未启用。[$rawfile(filepath/filename)](../../ui/ts-resource-access.md)中rawfile路径的文件不受该属性影响而限制访问。 +设置是否允许通过网页中的JavaScript脚本访问应用文件系统中的内容，默认未启用。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。 **参数：** @@ -3644,38 +3644,99 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void **示例：** ```ts - // xxx.ets + // index.ets @Entry @Component struct WebComponent { controller: WebController = new WebController(); ports: WebMessagePort[] = null; + @State sendFromEts: string = 'Send this message from ets to HTML'; + @State receivedFromHtml: string = 'Display received message send from HTML'; + build() { Column() { - Button('postMessage') + // 展示接收到的来自HTML的内容 + Text(this.receivedFromHtml) + // 输入框的内容发送到HTML + TextInput({placeholder: 'Send this message from ets to HTML'}) + .onChange((value: string) => { + this.sendFromEts = value; + }) + + // 1、创建两个消息端口 + Button('1.CreateWebMessagePorts') + .onClick(() => { + this.ports = this.controller.createWebMessagePorts(); + console.log("createWebMessagePorts size:" + this.ports.length) + }) + + // 2、将其中一个消息端口发送到HTML侧，由HTML侧保存并使用。 + Button('2.PostMessagePort') .onClick(() => { var sendPortArray = new Array(this.ports[1]); var msgEvent = new WebMessageEvent(); - msgEvent.setData("__init_ports__"); + msgEvent.setData("__init_port__"); msgEvent.setPorts(sendPortArray); this.controller.postMessage({message: msgEvent, uri: "*"}); }) - Web({ src: 'www.example.com', controller: this.controller }) + + // 3、另一个消息端口在应用侧注册回调事件。 + Button('3.RegisterCallback') + .onClick(() => { + this.ports[0].onMessageEvent((result: string) => { + var msg = 'Got msg from HTML: ' + result; + this.receivedFromHtml = msg; + }) + }) + + // 4、使用应用侧的端口给另一个已经发送到HTML的消息端口发送消息。 + Button('4.SendDataToHtml5') + .onClick(() => { + var msg = new WebMessageEvent(); + msg.setData(this.sendFromEts); + this.ports[0].postMessageEvent(msg); + }) + Web({ src: $rawfile("index.html"), controller: this.controller }) + .javaScriptAccess(true) + .fileAccess(true) } } } - // xxx.js + + // index.html + + + +display received message send from ets
+ + + + + // index.js var h5Port; - window.addEventListener('message', function(event){ - if (event.data == '__init_ports__') { + var output = document.querySelector('.output'); + window.addEventListener('message', function(event) { + if (event.data == '__init_port__') { if(event.ports[0] != null) { - h5Port = event.ports[0]; + h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 h5Port.onmessage = function(event) { - console.log('receive message from ets, on message:' + event.data); + // 2. 接收ets侧发送过来的消息. + var msg = 'Got message from ets:' + event.data; + output.innerHTML = msg; } } } }) + + // 3. 使用h5Port往ets侧发送消息. + function PostMsgToEts(data) { + h5Port.postMessage(data) + } ``` ### getUrl9+ @@ -5305,7 +5366,7 @@ close(): void ### postMessageEvent9+ postMessageEvent(message: WebMessageEvent): void -发送消息。 +发送消息。完整示例代码参考[postMessage](#postmessage9) **参数：** @@ -5340,7 +5401,7 @@ postMessageEvent(message: WebMessageEvent): void ### onMessageEvent9+ onMessageEvent(callback: (result: string) => void): void -注册回调函数，接收HTML5侧发送过来的消息。 +注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage9) **参数：** @@ -5412,7 +5473,7 @@ getData(): string ### setData9+ setData(data: string): void -设置当前对象中的消息。 +设置当前对象中的消息。完整示例代码参考[postMessage](#postmessage9) **参数：** @@ -5480,7 +5541,7 @@ getPorts(): Array\