鸿蒙开发者社区

公众号矩阵

移动端

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

全部课程软考信创认证华为认证厂商认证 IT技术 PMP项目管理免费题库

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

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

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

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

HarmonyOS

2024-12-17 14:34:52

浏览

赞

收藏 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>

回复

2024-12-17 16:24:23

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

发布

相关问题

HarmonyOS web组件如何注入js文件

974浏览 • 1回复待解决

HarmonyOS web组件注入JS代码

868浏览 • 1回复待解决

HarmonyOS 如何在Text中显示一个html样式的文本

1010浏览 • 1回复待解决

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

1277浏览 • 1回复待解决

HarmonyOS 在web组件中，如何给cookie设置过期时间

1086浏览 • 1回复待解决

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

3049浏览 • 1回复待解决

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

2018浏览 • 1回复待解决

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

1797浏览 • 1回复待解决

HarmonyOS Web组件加载html文件异常

1698浏览 • 1回复待解决

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

2349浏览 • 1回复待解决

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

2083浏览 • 1回复待解决

HarmonyOS web组件怎么获取html页面标题

665浏览 • 1回复待解决

HarmonyOS web iframe 注入.js 问题

1506浏览 • 1回复待解决

web组件对html文件的加载

1930浏览 • 1回复待解决

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

2206浏览 • 1回复待解决

HarmonyOS 使用web组件loadData加载html文件白屏

2562浏览 • 1回复待解决

HarmonyOS web组件怎么加载html字符串

961浏览 • 1回复待解决

HarmonyOS 如何在比较早的时机注入js

625浏览 • 1回复待解决

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

893浏览 • 0回复待解决

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

1034浏览 • 1回复待解决

HarmonyOS web组件如何实现根据html字符内容高度自适应

1095浏览 • 1回复待解决

HarmonyOS web如何获取html内容高度

1016浏览 • 1回复待解决

HarmonyOS Web组件加载页面出现样式丢失

809浏览 • 1回复待解决

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

1708浏览 • 1回复待解决

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

1050浏览 • 1回复待解决

提问

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

相关讨论帖

给Web开发者的HarmonyOS指南01-文本样式 0回复

给Web开发者的HarmonyOS指南02-布局样式 0回复

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

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

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

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