问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HarmonyOS 系统组件web加载字符串html，解析html代码中行内式样式问题？

头像
HarmonyOS码上奇行
    12.2k16324

    将web封装成一个组件用于加载字符串html，html代码中行内式样式无法解析或者解析无效。

    @Component
export struct ReserveWeb {
  webController: web_view.WebviewController = new webview.WebviewController();
  @Prop reserveClause: string = "";

  build() {
    Column() {
      Web({
        src: "xxx",
        controller: this.webController
      })
        .javaScriptAccess(true)//设置是否允许执行 JS 脚本，默认为 true ，表示允许执行。
        .fileAccess(true)//设置是否开启通过 $rawfile(filepath/filename) 访问应用中 rawfile 路径的文件
        .onlineImageAccess(true)//设置是否允许从网络加载图片资源（通过 HTTP 和 HTTPS 访问的资源）
        .domStorageAccess(true)//设置是否开启文档对象模型存储接口（DOM Storage API）权限
        .imageAccess(true)//设置是否允许自动加载图片资源
        .zoomAccess(true)
        .cacheMode(CacheMode.None)//加载资源使用cache，如果cache中无该资源则从网络中获取。
        .mixedMode(MixedMode.All)//设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容
        .overviewModeAccess(true)
        .geolocationAccess(false)//设置是否开启获取地理位置权限，默认开启。
        .onControllerAttached(() => {
          setTimeout(() => {
            let data = "<html><body>" + this.reserveClause + "</body></html>"
            this.webController.loadData(
              data,
              "text/html",
              "UTF-8"
            )
          }, 100)
        })
    }
  }
}
    "<p style=\"font-family: PingFangSC-Medium, PingFang SC;font-size: 15px;font-weight: 500;color: #222222;margin: 0 0 10px;\">"
" 1、xxxx</p>"
"<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 5px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容；</span>"
"</p>"
"<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 5px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容；</span>"
"</p>"
"<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 5px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容；</span>"
"</p>"
"<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 10px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容。</span>"
"</p>"
"<p style=\"font-family: PingFangSC-Medium, PingFang SC;font-size: 15px;font-weight: 500;color: #222222;margin: 0 0 10px;\">"
" 2、文本内容</p>"
"<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 10px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容</span>"
"</p>"
"<p style=\"font-family: PingFangSC-Medium, PingFang SC;font-size: 15px;font-weight: 500;color: #222222;margin: 0 0 10px;\">"
" 3、文本内容</p>"
"<p style=\"font-family: PingFangSC-Medium, PingFang SC;font-size: 15px;font-weight: 500;color: #222222;\">"
" 4、文本内容</p>"
    HarmonyOSharmonyosharmonyos-next
    阅读 488
    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12.2k16324

      需要加个meta标签，如以下demo：

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

@Entry
@Component
struct WebComponent
{
  controller: webview.WebviewController = new webview.WebviewController();
  @State content: string =
    "<!--index.html-->\n" +
      "<!DOCTYPE html>\n" +
      "<html>\n" +
      "<head>\n" +
      "    <title>xxxxx</title>\n" +
      "    <meta name=\"viewport\" content=\"initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no\">\n" +
      "</head>\n" +
      "<body>\n" +
      "<p style=\"font-family: PingFangSC-Medium, PingFang SC;font-size: 15px;font-weight: 500;color: #222222;margin: 0 0 10px;\">\n" +
      " 1、xxxx</p>\n" +
      "<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 5px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容；</span>\n" +
      "</p>\n" +
      "<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 5px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容；</span>\n" +
      "</p>\n" +
      "<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 5px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容；</span>\n" +
      "</p>\n" +
      "<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 10px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容。</span>\n" +
      "</p>\n" +
      "<p style=\"font-family: PingFangSC-Medium, PingFang SC;font-size: 15px;font-weight: 500;color: #222222;margin: 0 0 10px;\">\n" +
      " 2、文本内容</p>\n" +
      "<p style=\"font-family: PingFangSC-Regular, PingFang SC;margin: 0 0 10px;\"><span style=\"font-size: 13px;color: #666666;\">文本内容</span>\n" +
      "</p>\n" +
      "<p style=\"font-family: PingFangSC-Medium, PingFang SC;font-size: 15px;font-weight: 500;color: #222222;margin: 0 0 10px;\">\n" +
      " 3、文本内容</p>\n" +
      "<p style=\"font-family: PingFangSC-Medium, PingFang SC;font-size: 15px;font-weight: 500;color: #222222;\">\n" +
      " 4、文本内容</p>\n" +
      "</body>\n" +
      "\n" +
      "\n" +
      "</html>\n"
  build() {
    Column() {
      Web({ src: ' ', controller: this.controller })
        .onControllerAttached(()=>{
          this.controller.loadData(this.content, "text/html", "UTF-8",'about:blank','about:blank');
        })
        .mixedMode(MixedMode.All)
        .domStorageAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(false)
        .fileAccess(true)
    }
  }
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题