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 84a50ed11187900d2aace80ea8b622f67f157e27..ab0c2df4ef6c0cd38b38a5dedb4cab9c55f1910b 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
@@ -3404,38 +3404,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
+
+
+
+ Web Message Port Demo
+
+
+
+
+ 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+
@@ -5065,7 +5126,7 @@ close(): void
### postMessageEvent9+
postMessageEvent(message: WebMessageEvent): void
-发送消息。
+发送消息。完整示例代码参考[postMessage](#postmessage9)
**参数：**
@@ -5100,7 +5161,7 @@ postMessageEvent(message: WebMessageEvent): void
### onMessageEvent9+
onMessageEvent(callback: (result: string) => void): void
-注册回调函数，接收HTML5侧发送过来的消息。
+注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage9)
**参数：**
@@ -5172,7 +5233,7 @@ getData(): string
### setData9+
setData(data: string): void
-设置当前对象中的消息。
+设置当前对象中的消息。完整示例代码参考[postMessage](#postmessage9)
**参数：**
@@ -5240,7 +5301,7 @@ getPorts(): Array\
### setPorts9+
setPorts(ports: Array\): void
-设置当前对象中的消息端口。
+设置当前对象中的消息端口。完整示例代码参考[postMessage](#postmessage9)
**参数：**