HarmonyOS 鸿蒙Next Web组件如何获取展示URL内容的高度

发布于 1周前 作者 htzhanglong 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web组件如何获取展示URL内容的高度

Web组件如何获取展示URL内容的高度

2 回复
可以通过在js里面监听展示URL内容的高度,然后把高度值传输过来;放在ArkTS中的生命周期回调里面,然后在展示的页面加载完毕的回调里面然后设置webview的高度。比如要获取内容为html高度,可以在js里面监听html的高度,然后把高度值传输过来;
代码如下:
import web_webview from ‘[@ohos](/user/ohos).web.webview’;
[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  [@State](/user/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
            let pageHeight=this.controller.getPageHeight()+’’;
            pageHeight=this.webResult;
            console.info(“webResult=”+this.webResult);
            console.info(“pageHeight=”+pageHeight);
          }
          );
        })
    }
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

注意一下单位转换 h5获取的高度是px 可以根据你自己喜欢的单位进行设置。这里使用了getPageHeight()方法,参考:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#getpageheight

在HarmonyOS鸿蒙系统中,Next Web组件用于嵌入和展示Web内容,若需获取展示URL内容的高度,通常可以通过以下几种方法实现:

  1. JavaScript接口:如果Web内容支持JavaScript,可以通过注入JavaScript代码来获取内容的高度。在Next Web组件加载完成后,执行相应的JavaScript脚本,将获取到的高度值返回给鸿蒙应用。

  2. 内容加载监听:利用Next Web组件提供的内容加载事件监听功能,当内容加载完成后,通过DOM操作或JavaScript接口获取内容高度。

  3. CSS样式与布局:通过CSS设置固定或自适应布局,结合JavaScript动态计算内容区域的高度。这种方法适用于内容结构相对固定且可通过样式调整的场景。

  4. 滚动事件监听:如果内容存在滚动条,可通过监听滚动事件,动态获取当前滚动位置和内容总高度,从而间接获取展示内容的高度。

请注意,具体实现方式需根据Web内容的结构、布局以及鸿蒙系统的API文档进行调整。如果以上方法未能解决您的问题,可能是由于特定场景或版本差异导致,建议详细阅读鸿蒙官方文档或参考相关开发者社区。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部