Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 6c350396 编写于 作者: E echoorchid
浏览文件
操作

updata docs for web message port 

Signed-off-by: Nechoorchid <huweidong2@huawei.com>
上级 7de70c3c
隐藏空白更改
内联 并排
Showing with 120 addition and 28 deletion
zh-cn/application-dev/reference/apis/js-apis-webview.md
浏览文件 @ 6c350396
...@@ -1380,14 +1380,41 @@ import web_webview from '@ohos.web.webview'; ...@@ -1380,14 +1380,41 @@ import web_webview from '@ohos.web.webview';
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController();
ports: web_webview.WebMessagePort[]; ports: web_webview.WebMessagePort[];
@State sendFromEts: string = 'Send this message from ets to HTML';
@State receivedFromHtml: string = 'Display received message send from HTML';
build() { build() {
Column() { Column() {
// 展示接收到的来自HTML的内容
Text(this.receivedFromHtml)
// 输入框的内容发送到html
TextInput({placeholder: 'Send this message from ets to HTML'})
.onChange((value: string) => {
this.sendFromEts = value;
})
Button('postMessage') Button('postMessage')
.onClick(() => { .onClick(() => {
try { try {
// 1、创建两个消息端口
this.ports = this.controller.createWebMessagePorts(); this.ports = this.controller.createWebMessagePorts();
// 2、将其中一个消息端口发送到HTML侧，由HTML侧保存并使用。
this.controller.postMessage('__init_port__', [this.ports[0]], '*'); this.controller.postMessage('__init_port__', [this.ports[0]], '*');
// 3、另一个消息端口在应用侧注册回调事件。
this.ports[1].onMessageEvent((result: string) => {
var msg = 'Got msg from HTML: ' + result;
this.receivedFromHtml = msg;
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。
Button('SendDataToHTML')
.onClick(() => {
try {
this.ports[1].postMessageEvent("post message from ets to HTML");
} catch (error) { } catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
} }
...@@ -1404,36 +1431,40 @@ struct WebComponent { ...@@ -1404,36 +1431,40 @@ struct WebComponent {
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebView Callback Demo</title> <title>WebView Message Port Demo</title>
</head> </head>
<body> <body>
<h1>Message Demo</h1> <h1>WebView Message Port Demo</h1>
<div> <div>
<input type="button" value="SendToEts" onclick="testPostWebMsg(msgFromJS.value);"/><br/> <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
<input id="msgFromJs" type="text" value="Msg From H5 Demo"/><br/> <input id="msgFromJs" type="text" value="send this message from HTML to ets"/><br/>
</div> </div>
<p class="output">My body</p> <p class="output">display received message send from ets</p>
</body> </body>
<script src="xxx.js"></script> <script src="xxx.js"></script>
</html> </html>
``` ```
```js ```js
//xxx.js //xxx.js
var h5Port; var h5Port;
var output = document.querySelector('.output');
window.addEventListener('message', function (event) { window.addEventListener('message', function (event) {
if (event.data == '__init_port__') { if (event.data == '__init_port__') {
if (event.ports[0] != null) { if (event.ports[0] != null) {
h5Port = event.ports[0]; h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
h5Port.onmessage = function (event) { 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); h5Port.postMessage(data);
} }
``` ```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 6c350396
...@@ -123,7 +123,7 @@ domStorageAccess(domStorageAccess: boolean) ...@@ -123,7 +123,7 @@ domStorageAccess(domStorageAccess: boolean)
fileAccess(fileAccess: 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) ...@@ -152,7 +152,7 @@ fileAccess(fileAccess: boolean)
fileFromUrlAccess(fileFromUrlAccess: 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 ...@@ -3644,38 +3644,99 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void
**示例：** **示例：**
```ts ```ts
// xxx.ets // index.ets
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController();
ports: WebMessagePort[] = null; ports: WebMessagePort[] = null;
@State sendFromEts: string = 'Send this message from ets to HTML';
@State receivedFromHtml: string = 'Display received message send from HTML';
build() { build() {
Column() { 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(() => { .onClick(() => {
var sendPortArray = new Array(this.ports[1]); var sendPortArray = new Array(this.ports[1]);
var msgEvent = new WebMessageEvent(); var msgEvent = new WebMessageEvent();
msgEvent.setData("__init_ports__"); msgEvent.setData("__init_port__");
msgEvent.setPorts(sendPortArray); msgEvent.setPorts(sendPortArray);
this.controller.postMessage({message: msgEvent, uri: "*"}); 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
<!DOCTYPE html>
<html>
<body>
<h1>Web Message Port Demo</h1>
<div style="font-size: 24pt;">
<input type="button" value="5.SendToEts" onclick="PostMsgToEts(msgFromJS.value);" /><br/>
<input id="msgFromJS" type="text" value="send this message from HTML to ets" style="font-size: 16pt;" /><br/>
</div>
<p class="output">display received message send from ets</p>
</body>
<script src="index.js"></script>
</html>
// index.js
var h5Port; var h5Port;
window.addEventListener('message', function(event){ var output = document.querySelector('.output');
if (event.data == '__init_ports__') { window.addEventListener('message', function(event) {
if (event.data == '__init_port__') {
if(event.ports[0] != null) { if(event.ports[0] != null) {
h5Port = event.ports[0]; h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
h5Port.onmessage = function(event) { 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)
}
``` ```
### getUrl<sup>9+</sup> ### getUrl<sup>9+</sup>
...@@ -5305,7 +5366,7 @@ close(): void ...@@ -5305,7 +5366,7 @@ close(): void
### postMessageEvent<sup>9+</sup> ### postMessageEvent<sup>9+</sup>
postMessageEvent(message: WebMessageEvent): void postMessageEvent(message: WebMessageEvent): void
发送消息。 发送消息。完整示例代码参考[postMessage](#postmessage9)
**参数：** **参数：**
...@@ -5340,7 +5401,7 @@ postMessageEvent(message: WebMessageEvent): void ...@@ -5340,7 +5401,7 @@ postMessageEvent(message: WebMessageEvent): void
### onMessageEvent<sup>9+</sup> ### onMessageEvent<sup>9+</sup>
onMessageEvent(callback: (result: string) => void): void onMessageEvent(callback: (result: string) => void): void
注册回调函数，接收HTML5侧发送过来的消息。 注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage9)
**参数：** **参数：**
...@@ -5412,7 +5473,7 @@ getData(): string ...@@ -5412,7 +5473,7 @@ getData(): string
### setData<sup>9+</sup> ### setData<sup>9+</sup>
setData(data: string): void setData(data: string): void
设置当前对象中的消息。 设置当前对象中的消息。完整示例代码参考[postMessage](#postmessage9)
**参数：** **参数：**
...@@ -5480,7 +5541,7 @@ getPorts(): Array\<WebMessagePort\> ...@@ -5480,7 +5541,7 @@ getPorts(): Array\<WebMessagePort\>
### setPorts<sup>9+</sup> ### setPorts<sup>9+</sup>
setPorts(ports: Array\<WebMessagePort\>): void setPorts(ports: Array\<WebMessagePort\>): void
设置当前对象中的消息端口。 设置当前对象中的消息端口。完整示例代码参考[postMessage](#postmessage9)
**参数：** **参数：**
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或