HarmonyOS 鸿蒙Next：web加载HTML格式的文本数据，显示不全

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：web加载HTML格式的文本数据，显示不全

web加载HTML格式的文本数据，显示不全 通过这个地址:https://www.jyshare.com/front-end/61/，校验是能显示出来的， 附件为HTML格式的文本数据


更多关于HarmonyOS 鸿蒙Next：web加载HTML格式的文本数据，显示不全的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复 
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  dataStr3 = `<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <meta name=""viewport"" content=""initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"">
    <title>测试文件</title></head>
<body>
<div>
    <p style=""text-align: justify;""><span style=""font-size: 36px; font-family: 宋体, SimSun; color: #FF0000;""><strong>我是测试内容</strong></span>
    </p>
    <p style=""text-align: justify;""><span style=""font-size: 16px;"">近年来，生态旅游越来越受到游客喜爱。这个“十一”假期，文化和旅游部与国家林业和草原局将联合推出14条特色生态旅游线路，带领大家领略祖国的壮丽河山。</span>
    </p>
    <p>
        <img src=""https://pics1.baidu.com/feed/c83d70cf3bc79f3d05080f748d52621f708b298f.jpeg@f_auto?token=0d6c9427bad7e407a93bd8a4ddeb0910""
             width=""640"" class=""_1g4Ex _1i_Oe""
             style=""border: 1px solid rgba(0, 0, 0, 0.05); width: 100%; border-radius: 13px; max-width: 100%;""/></p>
    <p><span class=""bjh-p"" style=""overflow-y: auto; max-width: 100%;"">&nbsp; &nbsp; 这14条特色生态旅游线路以国家公园、风景名胜区、森林公园、湿地公园、地质公园等为基础，并结合交通干线进行串联，涉及安徽皖南人文山水、新疆阿勒泰千里画廊等生态旅游线路。14条线路共涵盖3处世界自然与文化双遗产、6处世界自然遗产、1处世界文化遗产、15家国家5A级旅游景区、28家国家森林公园、74处自然保护地。这些线路既有经典旅游产品，也有新兴旅游线路，更有创新业态组合，让游客假期出行有多样化的选择。</span>
    </p>
    <p><span class=""bjh-p"" style=""overflow-y: auto; max-width: 100%;"">来源：央视网</span></p>
    <p><a href=""http://www.baidu.com"" target=""_self"" title=""百度链接-当前页面打开"" textvalue=""百度链接内容""><span
            class=""bjh-p"" style=""overflow-y: auto; max-width: 100%;"">百度链接内容</span></a></p>
    <p><a href=""http://www.baidu.com"" target=""_blank"" title=""百度链接-新窗口打开标题""
          textvalue=""百度链接-新窗口打开""><span class=""bjh-p""
                                                style=""overflow-y: auto; max-width: 100%;"">百度链接-新窗口打开</span></a>
    </p>
</div>
</body>
</html>`
  build() {
    Column() {
      this.test1()
    }
  }
  @Builder
  test1() {
    // 组件创建时，加载www.example.com
    Web({ src: '', controller: this.controller })
      .onControllerAttached(() => {
        this.controller.loadData(
          encodeURIComponent(this.dataStr3),
          ""text/html"",
          ""UTF-8""
        );
      })
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Green)
  }
}

您将上面的demo中的Html替换为您的html文件是可以加载的哦，这边实践是可以的，您试试呢。（因为您的html文件太长，所以demo里面用的另一个html哈） 您提供下您的IDE和工程机版本呢？这边用NEXT0.0.60加载是正常的。 您把.layoutMode(WebLayoutMode.FIT_CONTENT) 改成 layoutMode(WebLayoutMode.NONE) 就可以全部加载。

    Web({ src: '', controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
      .onControllerAttached(()=>{
        this.controller.loadData(
          encodeURIComponent(this.dataStr3),
          ""text/html"",
          ""UTF-8""
        );
      })
      .margin({bottom:20})
      .verticalScrollBarAccess(false)
      .horizontalScrollBarAccess(false)
      .javaScriptAccess(true)
      .cacheMode(CacheMode.None)
      .layoutMode(WebLayoutMode.NONE)
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
        // .height(this.showWeb ? px2vp(this.controller?.getPageHeight()) : 0)
      .constraintSize({
        minWidth: '100%',
        minHeight: 50
      })

这段代码是根据您给的demo改的，把.layoutMode(WebLayoutMode.FIT_CONTENT) 改成 layoutMode(WebLayoutMode.NONE) 就可以全部加载，这边实际验证是可以加载的哦。 找到原因了，数据要重新编码encodeURIComponent(str),"

更多关于HarmonyOS 鸿蒙Next：web加载HTML格式的文本数据，显示不全的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next中web加载HTML格式的文本数据显示不全的问题，以下是一些可能的原因及解决方案：

  1. 内容过长或样式复杂：HTML内容过长或包含大量样式和脚本，可能导致加载和渲染不完全。建议优化HTML内容，减少不必要的样式和脚本，或分段加载显示。
  2. Web组件限制：检查是否受Web组件的某些特性或限制影响，如视口大小、字体渲染等。尝试调整这些设置，以适应HTML内容的显示需求。
  3. 布局问题：确保Web组件的布局属性设置正确，特别是高度和宽度。如果高度设置不当，可能导致内容显示不全。建议显式设置高度，确保其足够容纳HTML内容。
  4. 系统兼容性问题：确保设备已升级至最新版本的鸿蒙系统，并检查系统是否对Web组件进行了优化或修复。

如果以上方案无法解决问题，可能是由于特定场景或代码实现上的问题。此时，建议仔细检查代码实现，或参考官方文档和示例代码。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部