HarmonyOS鸿蒙Next中webview高度无法自适应问题及代码示例

HarmonyOS鸿蒙Next中webview高度无法自适应问题及代码示例

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  str: string = '<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>'
  str2: string = '<p>The \'Product Recommendation\' has expired.</p>'

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            this.controller.loadData(
              this.str2,
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .layoutMode(WebLayoutMode.FIT_CONTENT)
        .backgroundColor('#ff0000')
        .width(260)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中webview高度无法自适应问题及代码示例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

参考一下这个demo

import { webview } from '@kit.ArkWeb';

class AgreementData {
  htmlData: string = `
<div>测试测试</div>
<div>测试测试</div>
<div>测试测试</div>
<div>测试测试</div>
<div>测试测试</div>

`

}

@Entry
@Component
struct Page021 {
  controller: webview.WebviewController = new webview.WebviewController();
  agreementData: AgreementData = new AgreementData()
  myHtmlStart: string =
    `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
//用于根据浏览器对 CSS.supports 和 env/constant 的支持情况，动态地调整视口元标签的内容，以达到最佳的页面显示效果。
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>

<title></title>
<!--用于设置浏览器页签上显示的小图标 start-->
<link rel="stylesheet" href="mycss.css" />
<link rel="icon" href="./static/favicon.ico" />
<!--用于设置浏览器页签上显示的小图标 end-->
<!--preload-links-->
<!--app-context-->
</head>
<body>
`

  build() {
    Scroll() {
      Column() {
        Text('测试顶部').backgroundColor(Color.Red).width('100%').height('800lpx')
        Web({ src: '', controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
          .width('100%')
          .onAppear(() => {
            console.info('onAppear')
            this.controller.loadData(
              `${this.myHtmlStart}${this.agreementData.htmlData} `,
              "text/html",
              "UTF-8"
            );
          })
          .layoutMode(WebLayoutMode.FIT_CONTENT)
          .hitTestBehavior(HitTestMode.None)

        Text('测试底部').backgroundColor(Color.Blue).width('100%')
      }
    }.width('100%').height('100%').align(Alignment.Top)
  }
}

参考文档：https://developer.huawei.com/consumer/cn/blog/topic/03154781469356017

更多关于HarmonyOS鸿蒙Next中webview高度无法自适应问题及代码示例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙OS）中，WebView组件的高度自适应问题通常是由于布局设置不当或未正确监听页面内容变化导致的。以下是一个简单的代码示例，展示如何实现WebView高度自适应。

示例代码：

import webview from '@ohos.web.webview';
import { Dimensions } from '@ohos.window';

@Entry
@Component
struct WebViewExample {
  @State webViewHeight: number = Dimensions.get('window').height;

  build() {
    Column() {
      Web({
        src: 'https://www.example.com',
        onPageFinished: (event) => {
          // 监听页面加载完成事件
          this.updateWebViewHeight();
        }
      })
      .height(this.webViewHeight)
    }
  }

  // 更新WebView高度
  updateWebViewHeight() {
    const webView = this.$refs('webView') as webview.WebviewController;
    webView.getContentHeight().then((height) => {
      this.webViewHeight = height;
    });
  }
}

关键点：

  1. onPageFinished事件：监听页面加载完成事件，确保在页面内容加载完毕后更新高度。
  2. getContentHeight方法：通过WebView的getContentHeight方法获取内容高度，并动态调整WebView的高度。
  3. @State变量：使用@State变量webViewHeight来动态绑定WebView的高度。

注意事项：

  • 确保WebView的父容器高度设置正确，避免影响WebView的高度计算。
  • 如果页面内容动态变化，可能需要通过setInterval或setTimeout定期更新高度。

通过以上代码，可以实现WebView组件在HarmonyOS中的高度自适应。

在HarmonyOS鸿蒙Next中，WebView高度无法自适应的问题通常是由于WebView默认高度固定导致的。可以通过动态设置WebView的高度来解决。以下是一个示例代码，展示如何根据网页内容动态调整WebView高度：

WebView webView = new WebView(context);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        view.evaluateJavascript("document.body.scrollHeight;", value -> {
            int height = Integer.parseInt(value.replace("\"", ""));
            ViewGroup.LayoutParams params = webView.getLayoutParams();
            params.height = height;
            webView.setLayoutParams(params);
        });
    }
});
webView.loadUrl("https://example.com");

通过onPageFinished方法获取网页内容高度，并动态调整WebView的LayoutParams，实现高度自适应。

回到顶部