HarmonyOS鸿蒙Next中Web组件加载HTML文本

HarmonyOS鸿蒙Next中Web组件加载HTML文本

Web组件加载HTML文本，怎样才能让内容根据web容器大小自适应展示？overviewModeAccess参数不设置或者设置为true，展示的区域太小看不清，设置为false展示区域又太大。 目前iOS是通过注入下面这段js让内容自适应展示。

4 回复

尝试使用web的javaScriptOnDocumentEnd方法，这个html文本还是要根据具体的行内样式来进行更改，看是否能够满足需求

//Index.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  private jsStr: string = "window.document.getElementById(\"result\").innerHTML = '<p>一、预约前注意事项：<br>受种者或其陪同人员应提前与接种门诊进行电话，根据当地接种门诊的要求给予健康信息并进行预约接种。<br><br>二、前往预防接种门诊：<br>123123123'</span>";
  @State scripts: Array<ScriptItem> = [
    { script: this.jsStr, scriptRules: ["*"] }
  ];

  build() {
    Column({ space: 20 }) {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .javaScriptOnDocumentEnd(this.scripts)
        .width('100%')
        .height('100%')
    }
  }
}

//index.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<body style="font-size: 16px;">
<div id="result" style="margin:10px">test msg</div>
</body>
</html>

更多关于HarmonyOS鸿蒙Next中Web组件加载HTML文本的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是否考虑过定义原生h5静态页面。然后适配，可以通过js 通信，把你的h5传递进来加载显示呢。这样你的web 组件就是加载了一个本地h5静态页面。页面样式全部在自己掌握了。ios 这段代码注入是适配手机的吧。

在HarmonyOS鸿蒙Next中，Web组件可以通过loadData方法加载HTML文本。loadData方法允许开发者直接将HTML字符串加载到Web组件中显示，而不需要从网络或本地文件加载。该方法的基本语法如下：

webController.loadData(htmlText, mimeType, encoding);
  • htmlText：要加载的HTML字符串。
  • mimeType：HTML内容的MIME类型，通常为text/html。
  • encoding：HTML内容的编码方式，通常为utf-8。

例如，加载一个简单的HTML文本可以这样实现：

let webController = new webview.WebviewController();
webController.loadData('<html><body><h1>Hello, HarmonyOS!</h1></body></html>', 'text/html', 'utf-8');

需要注意的是，Web组件在鸿蒙Next中是基于WebView实现的，因此可以通过WebviewController来控制Web组件的加载行为。此外，加载的HTML文本中可以包含CSS和JavaScript代码，以便实现更丰富的页面效果和交互功能。

如果HTML文本中包含外部资源（如图片、CSS文件等），则需要确保这些资源的路径正确，并且可以通过网络或本地文件系统访问。如果资源无法加载，可能会导致页面显示不完整。

Web组件还支持通过loadUrl方法加载远程或本地的HTML文件，但loadData方法更适合用于直接加载HTML字符串的场景。

在HarmonyOS鸿蒙Next中，Web组件用于加载和显示网页内容。要加载HTML文本，可以使用loadData()或loadDataWithBaseURL()方法。

  1. 使用loadData()方法：

    webView.loadData(htmlText, "text/html", "UTF-8");

    其中，htmlText是你要加载的HTML字符串。

  2. 使用loadDataWithBaseURL()方法：

    webView.loadDataWithBaseURL(null, htmlText, "text/html", "UTF-8", null);

    这种方法允许你指定一个基础URL，用于解析相对路径的资源。

这两种方法都可以将HTML文本加载到Web组件中并显示。

回到顶部