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

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

HarmonyOS
2024-09-05 10:43:52
浏览
收藏 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)) 
    } 
  } 
}

index.html文件:

<script type="text/javascript"> 
  function watchWindowSize(){ 
    var h = document.body.clientHeight; 
    return h; 
  } 
  </script>
分享
微博
QQ
微信
回复
2024-09-05 18:14:47
相关问题
HarmonyOS webview如何设置自适应
448浏览 • 1回复 待解决
WebView加载网页无法自适应
48浏览 • 1回复 待解决
HarmonyOS webview如何加载沙箱html
283浏览 • 1回复 待解决
HarmonyOS webview加载本地html问题
53浏览 • 1回复 待解决
HarmonyOS webview组件如何加载html代码?
297浏览 • 1回复 待解决
HarmonyOS 高度自适应问题
148浏览 • 1回复 待解决
HarmonyOS 高度自适应
105浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
160浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
441浏览 • 1回复 待解决
鸿蒙是否支持加载HTML
12492浏览 • 3回复 待解决
HarmonyOS RelativeContainer宽高自适应问题
268浏览 • 1回复 待解决