HarmonyOS webview加载html片段,是否有相关的api设置宽度的自适应

HarmonyOS  webview加载html片段,是否有相关的api设置宽度的自适应。

HarmonyOS
2024-09-05 10:43:52
884浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zbw_apple

解决思路供参考:

1.前端js写一个函数在页面加载完毕之后获取html的高度。

2.ArkTS调用h5函数的能力,调用该函数并接受到html的高度

3.利用web组件的生命周期回调函数onpageend中设置接收到的h5侧传来的html的宽高,并进行设置达到自适应

需要注意单位转换,h5获取的高度是px,ArkTS端的设置可以根据你自己喜欢的单位进行设置

参考demo:

import web_webview from '@ohos.web.webview'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
  @State webResult:string = '' 
  build() { 
    Column() { 
      Text(this.webResult).fontSize(20) 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .aspectRatio(1.5) 
        .onPageEnd(e => { 
          this.controller.runJavaScript( 
            'watchWindowSize()', 
            (error,result)=>{ 
              this.webResult=result 
              console.info("pageheight="+this.webResult); 
            } 
          ); 
        }) 
        .height(parseInt(this.webResult)) 
    } 
  } 
}
  • 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.

index.html文件:

<script type="text/javascript"> 
  function watchWindowSize(){ 
    var h = document.body.clientHeight; 
    return h; 
  } 
  </script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
分享
微博
QQ
微信
回复
2024-09-05 18:14:47


相关问题
WebView加载网页无法自适应
1129浏览 • 1回复 待解决
HarmonyOS webview如何设置自适应
1312浏览 • 1回复 待解决
HarmonyOS Image如何设置内容宽度自适应
739浏览 • 1回复 待解决
HarmonyOS popup宽度自适应
573浏览 • 1回复 待解决
HarmonyOS List是否可以设置自适应高度
520浏览 • 1回复 待解决
HarmonyOS grid如何自适应宽度
763浏览 • 1回复 待解决
HarmonyOS webview高度不能自适应
541浏览 • 1回复 待解决
HarmonyOS webview自适应屏幕
699浏览 • 1回复 待解决
HarmonyOS RelativeContainer自适应高度相关
647浏览 • 1回复 待解决