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

HarmonyOS
2024-12-17 13:28:08
浏览
收藏 0
回答 1
回答 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.
分享
微博
QQ
微信
回复
2024-12-17 15:37:08


相关问题
HarmonyOS TextTimer示例运行不正常
409浏览 • 1回复 待解决
app嵌入H5网页登录储存
825浏览 • 1回复 待解决
HarmonyOS 旋转屏幕后显示不正常
586浏览 • 1回复 待解决
HarmonyOS 页面底部流出安全区
502浏览 • 1回复 待解决
HarmonyOS 安全区域问题
617浏览 • 1回复 待解决
HarmonyOS 安全区域失效
465浏览 • 1回复 待解决
HarmonyOS 安全区域出错
500浏览 • 1回复 待解决
HarmonyOS 如何获取手机安全区域高度
522浏览 • 1回复 待解决
HarmonyOS Web组件预渲染加载不正常
674浏览 • 1回复 待解决
HarmonyOS h5拉起app,如何获取参数
430浏览 • 1回复 待解决