codecamp

建立应用侧与前端页面数据通道

前端页面和应用侧之间可以用createWebMessagePorts()接口创建消息端口来实现两端的通信。

在下面的示例中,应用侧页面中通过createWebMessagePorts方法创建消息端口,再把其中一个端口通过postMessage()接口发送到前端页面,便可以在前端页面和应用侧之间互相发送消息。

  • 应用侧代码。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. @Entry
    4. @Component
    5. struct WebComponent {
    6. controller: web_webview.WebviewController = new web_webview.WebviewController();
    7. ports: web_webview.WebMessagePort[];
    8. @State sendFromEts: string = 'Send this message from ets to HTML';
    9. @State receivedFromHtml: string = 'Display received message send from HTML';
    10. build() {
    11. Column() {
    12. // 展示接收到的来自HTML的内容
    13. Text(this.receivedFromHtml)
    14. // 输入框的内容发送到html
    15. TextInput({placeholder: 'Send this message from ets to HTML'})
    16. .onChange((value: string) => {
    17. this.sendFromEts = value;
    18. })
    19. Button('postMessage')
    20. .onClick(() => {
    21. try {
    22. // 1、创建两个消息端口。
    23. this.ports = this.controller.createWebMessagePorts();
    24. // 2、在应用侧的消息端口(如端口1)上注册回调事件。
    25. this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
    26. let msg = 'Got msg from HTML:';
    27. if (typeof(result) === 'string') {
    28. console.info(`received string message from html5, string is: ${result}`);
    29. msg = msg + result;
    30. } else if (typeof(result) === 'object') {
    31. if (result instanceof ArrayBuffer) {
    32. console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
    33. msg = msg + 'lenght is ' + result.byteLength;
    34. } else {
    35. console.info('not support');
    36. }
    37. } else {
    38. console.info('not support');
    39. }
    40. this.receivedFromHtml = msg;
    41. })
    42. // 3、将另一个消息端口(如端口0)发送到HTML侧,由HTML侧保存并使用。
    43. this.controller.postMessage('__init_port__', [this.ports[0]], '*');
    44. } catch (error) {
    45. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
    46. }
    47. })
    48. // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。
    49. Button('SendDataToHTML')
    50. .onClick(() => {
    51. try {
    52. if (this.ports && this.ports[1]) {
    53. this.ports[1].postMessageEvent(this.sendFromEts);
    54. } else {
    55. console.error(`ports is null, Please initialize first`);
    56. }
    57. } catch (error) {
    58. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
    59. }
    60. })
    61. Web({ src: $rawfile('xxx.html'), controller: this.controller })
    62. }
    63. }
    64. }
  • 前端页面代码。
    1. <!--xxx.html-->
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <title>WebView Message Port Demo</title>
    7. </head>
    8. <body>
    9. <h1>WebView Message Port Demo</h1>
    10. <div>
    11. <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
    12. <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
    13. </div>
    14. <p class="output">display received message send from ets</p>
    15. </body>
    16. <script>
    17. var h5Port;
    18. var output = document.querySelector('.output');
    19. window.addEventListener('message', function (event) {
    20. if (event.data === '__init_port__') {
    21. if (event.ports[0] !== null) {
    22. h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
    23. h5Port.onmessage = function (event) {
    24. // 2. 接收ets侧发送过来的消息.
    25. var msg = 'Got message from ets:';
    26. var result = event.data;
    27. if (typeof(result) === 'string') {
    28. console.info(`received string message from html5, string is: ${result}`);
    29. msg = msg + result;
    30. } else if (typeof(result) === 'object') {
    31. if (result instanceof ArrayBuffer) {
    32. console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
    33. msg = msg + 'lenght is ' + result.byteLength;
    34. } else {
    35. console.info('not support');
    36. }
    37. } else {
    38. console.info('not support');
    39. }
    40. output.innerHTML = msg;
    41. }
    42. }
    43. }
    44. })
    45. // 3. 使用h5Port往ets侧发送消息.
    46. function PostMsgToEts(data) {
    47. if (h5Port) {
    48. h5Port.postMessage(data);
    49. } else {
    50. console.error('h5Port is null, Please initialize first');
    51. }
    52. }
    53. </script>
    54. </html>
前端页面调用应用侧函数
管理页面跳转及浏览记录导航
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }