HarmonyOS App 中嵌入的 H5 页面安全区无法正确获取，导致界面展示不正常

HarmonyOS

put_get

2024-12-17 13:28:08

浏览

回答 1

按赞同

按时间

Excelsior_abit

可以在外部获取后，通过桥接传给H5，可以参考如下代码

import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  ports: web_webview.WebMessagePort[] = [];
  @State receivedFromHtml: string = '';
  @State acceptType: string = ''
  aboutToAppear() {
    // 配置Web开启调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }
  onPageShow() {
    setTimeout(() => {
      this.getDataFromH5();
    }, 500)
  }
  getDataFromH5() {
    try {
      // 1、创建两个消息端口
      this.ports = this.controller.createWebMessagePorts();
      // 2、在应用侧的消息端口（端口1）上注册回调事件。
      this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
        if (typeof (result) === 'string') {
          // H5侧传过来的是字符串数据
          this.receivedFromHtml = result;
          this.acceptType = result
          console.log('receivedAccept' + result)
          return this.receivedFromHtml;
        }
        // 必须return数据，否则报错
        return this.receivedFromHtml;
      })
      // 3、将另一个消息端口（端口0）发送到HTML侧，由HTML侧保存并使用
      this.controller.postMessage('init_port', [this.ports[0]], '*');
    } catch (error) {
      let e: business_error.BusinessError = error as business_error.BusinessError;
      console.error(ErrorCode: ${e.code},  Message: ${e.message});
    }
  }
  build() {
    Column() {
      Text(this.acceptType)
        .fontSize(20)
        .margin(20)
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .height('50%')
        .onlineImageAccess(true)
        .imageAccess(true)
    }
    .height('100%')
    .width('100%')
  }
}




<!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
  <div> 获取input 类型</div>
  <input id="file" onclick="getAcceptType('file')" type="file" accept="image/*">
  <input id="file2" onclick="getAcceptType('file2')" type="file" accept="image/png">
  <input id="file3" onclick="getAcceptType('file3')" type="file" accept="video/mp4">
  </body>
  </html>
  <script>
  var h5Port;
window.addEventListener('message', function (event) {
  if (event.data === '__init_port__') {
    if (event.ports[0] !== null) {
      h5Port = event.ports[0]; // 1. 保存从应用侧发送过来的端口。
    }
  }
})

function getAcceptType(id){
  let acceptType= document.getElementById(id).getAttribute('accept')
  if (h5Port) {
    h5Port.postMessage(acceptType);
  } else {
    console.log('h5Port is null, Please initialize first');
  }
}

</script>
  </html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.

2024-12-17 15:37:08

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS App 中嵌入的 H5 页面安全区无法正确获取，导致界面展示不正常

订阅鸿蒙技术特刊，精选内容抢先看