W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
前端頁面和應(yīng)用側(cè)之間可以用createWebMessagePorts()接口創(chuàng)建消息端口來實現(xiàn)兩端的通信。
在下面的示例中,應(yīng)用側(cè)頁面中通過createWebMessagePorts方法創(chuàng)建消息端口,再把其中一個端口通過postMessage()接口發(fā)送到前端頁面,便可以在前端頁面和應(yīng)用側(cè)之間互相發(fā)送消息。
- // xxx.ets
- import web_webview from '@ohos.web.webview';
- @Entry
- @Component
- struct WebComponent {
- controller: web_webview.WebviewController = new web_webview.WebviewController();
- ports: web_webview.WebMessagePort[];
- @State sendFromEts: string = 'Send this message from ets to HTML';
- @State receivedFromHtml: string = 'Display received message send from HTML';
- build() {
- Column() {
- // 展示接收到的來自HTML的內(nèi)容
- Text(this.receivedFromHtml)
- // 輸入框的內(nèi)容發(fā)送到html
- TextInput({placeholder: 'Send this message from ets to HTML'})
- .onChange((value: string) => {
- this.sendFromEts = value;
- })
- Button('postMessage')
- .onClick(() => {
- try {
- // 1、創(chuàng)建兩個消息端口。
- this.ports = this.controller.createWebMessagePorts();
- // 2、在應(yīng)用側(cè)的消息端口(如端口1)上注冊回調(diào)事件。
- this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
- let msg = 'Got msg from HTML:';
- if (typeof(result) === 'string') {
- console.info(`received string message from html5, string is: ${result}`);
- msg = msg + result;
- } else if (typeof(result) === 'object') {
- if (result instanceof ArrayBuffer) {
- console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
- msg = msg + 'lenght is ' + result.byteLength;
- } else {
- console.info('not support');
- }
- } else {
- console.info('not support');
- }
- this.receivedFromHtml = msg;
- })
- // 3、將另一個消息端口(如端口0)發(fā)送到HTML側(cè),由HTML側(cè)保存并使用。
- this.controller.postMessage('__init_port__', [this.ports[0]], '*');
- } catch (error) {
- console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
- }
- })
- // 4、使用應(yīng)用側(cè)的端口給另一個已經(jīng)發(fā)送到html的端口發(fā)送消息。
- Button('SendDataToHTML')
- .onClick(() => {
- try {
- if (this.ports && this.ports[1]) {
- this.ports[1].postMessageEvent(this.sendFromEts);
- } else {
- console.error(`ports is null, Please initialize first`);
- }
- } catch (error) {
- console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
- }
- })
- Web({ src: $rawfile('xxx.html'), controller: this.controller })
- }
- }
- }
- <!--xxx.html-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>WebView Message Port Demo</title>
- </head>
- <body>
- <h1>WebView Message Port Demo</h1>
- <div>
- <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
- <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
- </div>
- <p class="output">display received message send from ets</p>
- </body>
- <script>
- 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]; // 1. 保存從ets側(cè)發(fā)送過來的端口
- h5Port.onmessage = function (event) {
- // 2. 接收ets側(cè)發(fā)送過來的消息.
- var msg = 'Got message from ets:';
- var result = event.data;
- if (typeof(result) === 'string') {
- console.info(`received string message from html5, string is: ${result}`);
- msg = msg + result;
- } else if (typeof(result) === 'object') {
- if (result instanceof ArrayBuffer) {
- console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
- msg = msg + 'lenght is ' + result.byteLength;
- } else {
- console.info('not support');
- }
- } else {
- console.info('not support');
- }
- output.innerHTML = msg;
- }
- }
- }
- })
- // 3. 使用h5Port往ets側(cè)發(fā)送消息.
- function PostMsgToEts(data) {
- if (h5Port) {
- h5Port.postMessage(data);
- } else {
- console.error('h5Port is null, Please initialize first');
- }
- }
- </script>
- </html>
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: