鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

HarmonyOS 如何在web组件中给html注入样式

HarmonyOS

5天前

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

参考demo给style标签注入样式：

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

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  private customStyle: string =
    'html, body {margin: 0; padding: 0; overflow: hidden; touch-action: none; background:#ace}';

  aboutToAppear() {
    // 配置Web开启调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {

      Button('style').onClick((event: ClickEvent) => {

        this.webviewController.runJavaScript(`const head = document.head;
                                              console.log(head);
                                              const style = document.createElement('style');
                                              style.appendChild(document.createTextNode("${this.customStyle}"))
                                              head.appendChild(style)
        `)
      })
      Web({ src: $rawfile('index.html'), controller: this.webviewController }).domStorageAccess(true)
    }
  }
}
// html
<!DOCTYPE html>
<html>
<head>

</head>

<body>
<h1 id="text">
    这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为绿色，调用runJavaScriptCodePassed方法后字体为红色
</h1>
</body>
</html>

回复

5天前

如何写精华回答，获更多曝光？

发布

相关问题

HarmonyOS Web组件注入js怎么传递对象

512浏览 • 1回复待解决

问：利用web组件，可以完成js和wen组件的方法的相互调用，如何利用web组件，给html发消息。

2231浏览 • 1回复待解决

HarmonyOS Web组件如何加载html字符串

622浏览 • 1回复待解决

HarmonyOS Web组件加载html文件异常

522浏览 • 1回复待解决

HarmonyOS web组件内的html如何加载本地资源？

647浏览 • 1回复待解决

Web组件使用rawFile加载离线html时,如何在url后拼接参数

937浏览 • 1回复待解决

HarmonyOS web iframe 注入.js 问题

540浏览 • 1回复待解决

如何使用Web组件加载本地的html文件？

691浏览 • 1回复待解决

web组件对html文件的加载

783浏览 • 1回复待解决

HarmonyOS web组件注入js代理输入方法名列表不方便

283浏览 • 1回复待解决

HarmonyOS Web如何搜索html界面的内容？

331浏览 • 1回复待解决

如何使用Web组件加载一段html代码片段？

507浏览 • 1回复待解决

HarmonyOS 怎么给web组件的请求添加header

515浏览 • 1回复待解决

如何在业务代码里通过new Web组件的方式获取web的UserAgent给业务使用？

209浏览 • 1回复待解决

如何在web组件中获取和设置UserAgent

927浏览 • 1回复待解决

预览器上WEB组件无法显示HTML内容

2559浏览 • 1回复待解决

#鸿蒙通关秘籍#如何在HarmonyOS中创建并设计Tabs组件的样式？

93浏览 • 1回复待解决

通过Web组件加载一段Html代码片段如何实现？

421浏览 • 1回复待解决

如何在React List组件中自定义滑动线样式？

145浏览 • 0回复待解决

类web开发，如何设置组件的样式展示动画

354浏览 • 1回复待解决

Web组件如何选择合适的生命周期去注入JS代码或者事件

1926浏览 • 1回复待解决

web组件加载html页面，无法执行jscript脚本

909浏览 • 1回复待解决

HarmonyOS Web无法访问指定html

257浏览 • 1回复待解决

如何使用Web组件下载pdf文件并展示给用户

777浏览 • 1回复待解决

#鸿蒙通关秘籍#如何在Tabs组件中实现分割线样式？

118浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

HarmonyOS css样式与普通HTML css样式之间存在的区别 2回复

如何在 HarmonyOS Next 中实现自定义 BackupExtensionAbility 0回复

TextInput组件如何在输入框的右边设置自定义样式（如图片），代码加详细解释 2回复

如何在 kubernetes 中开启 ipvs 模式 0回复

如何在 Ubuntu 中更改默认终端 0回复

Copyright © 2005-2024 51CTO.COM 京ICP证060544版权所有未经许可请勿转载