HarmonyOS Web组件RenderMode.SYNC\_RENDER使用问题？

Question

在使用Web组件时，官方文档介绍“如果网页内容宽或长度超过8000px，请在Web组件创建的时候指定RenderMode.SYNC\_RENDER模式”。

问题如下：

1、如何计算网页高度？

2、在不知道网页高度的情况下，可否直接使用 .layoutMode(WebLayoutMode.FIT\_CONTENT) 和 renderMode: RenderMode.SYNC\_RENDER ？

Answer 1

1、可以通过在js里面监听展示URL内容的高度，然后把高度值传输过来；放在ArkTS中的生命周期回调里面，然后在展示的页面加载完毕的回调里面然后设置webview的高度。比如要获取内容为html高度，可以在js里面监听html的高度，然后把高度值传输过来。

代码如下：

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
            let pageHeight=this.controller.getPageHeight()+’’;
            pageHeight=this.webResult;
            console.info(“webResult=”+this.webResult);
            console.info(“pageHeight=”+pageHeight);
          }
          );
        })
    }
  }
}

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

2、可直接设置支持全量展开。api12支持web组件全量展开，需要设置renderMode：RenderMode.SYNC\_RENDER。

参考文档： https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkweb/ts-basic-components-web.md\#%E6%8E%A5%E5%8F%A3

参考如下：

Web({ src: $rawfile('index.html'), controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
  .width(CommonConstants.WIDTH_OR_HEIGHT)
  .layoutMode(WebLayoutMode.FIT_CONTENT) 

目前只支持两种web布局模式，分别为Web布局跟随系统WebLayoutMode.NONE和Web基于页面大小的自适应网页布局WebLayoutMode.FIT\_CONTENT。默认为WebLayoutMode.NONE模式。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5\#layoutmode11