鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

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

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

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

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

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

原生调用html中的javascript的实现。

原生调用html中的javascript的实现。

HarmonyOS

社恐的小美

2024-08-06 18:53:52

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

油炸帕尼尼

html

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<h1 id="text">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为绿色，调用runJavaScriptCodePassed方法后字体为红色</h1>
<script>
    // 调用有参函数时实现。
    var param = "param: JavaScript Hello World!";
    function htmlTest(param) {
        document.getElementById('text').style.color = 'green';
        console.log(param);
    }
</script>
</body>
</html>

arkTS

import web_webview from '@ohos.web.webview';
@Entry
@Component
struct Index {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController()
  aboutToAppear(): void {
    // clearAllCookiesSync参数表示清除隐私模式（true）或非隐私模式（false）下，webview的所有内存cookies。
    web_webview.WebCookieManager.clearAllCookiesSync(true);
  }

  build() {
    Column() {
      Button('runJavaScript')
        .onClick(() => {
          // 前端页面函数无参时，将param删除。
          this.webviewController.runJavaScript('htmlTest(param)');
        })
      Web({ src: $rawfile("index.html"), controller: this.webviewController
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

回复

2024-08-06 20:26:40

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

发布

相关问题

HarmonyOS H5中触发原生的调用定位相关的示例实现

61浏览 • 1回复待解决

ArkTS开发中如何调用鸿蒙系统原生的加载动画？

2311浏览 • 1回复待解决

前端代码如何调用原生中的方法并获取到返回值？

95浏览 • 1回复待解决

华为手机如何调用谷歌原生的生物识别API?

7702浏览 • 1回复待解决

如何实现类似Java中的反射方法调用能力

1743浏览 • 1回复待解决

webview和原生进行通信的方式有哪些？怎么实现

1660浏览 • 1回复待解决

HarmonyOS 怎么实现从别的 module 中调用 webview 的 bridge 的注册方法

94浏览 • 1回复待解决

在组件的aboutToAppear()中，使用WebviewController的loadData（）方法加载html报错

130浏览 • 1回复待解决

如何在ArkTS代码中执行HTML内的JS函数

1761浏览 • 1回复待解决

基于原生能力实现图文混排

147浏览 • 1回复待解决

基于原生实现高级显示效果

309浏览 • 1回复待解决

HarmonyOS 使用web加载生成的html文本，怎么在这段html文本中引用rawfile或者应用cache下的css文件

32浏览 • 1回复待解决

请问鸿蒙里面怎样实现类似vue中v-html这一功能呢？

2698浏览 • 1回复待解决

DevEco编译报错：Invalid JavaScript file path

3023浏览 • 0回复待解决

基于原生能力的组件封装

157浏览 • 1回复待解决

基于原生的水印添加能力

348浏览 • 1回复待解决

HarmonyOS js调用webview中的方法

73浏览 • 1回复待解决

webview的oninterceptrequest中调用异步操作

1606浏览 • 1回复待解决

如何调用nodejs中的组件库

787浏览 • 1回复待解决

HarmonyOS rnoh中支持非新架构的原生模块和原生UI吗

100浏览 • 1回复待解决

部分功能实现依赖于原生系统，HarmonyOS能否实现

125浏览 • 1回复待解决

基于原生的跨模块资源访问

411浏览 • 1回复待解决

基于原生能力的网络状态感知

184浏览 • 1回复待解决

arkTs 如何在方法调用中，打印出方法的调用栈？

2783浏览 • 1回复待解决

如何用Harmony调用原生相机拍照并获取图片？

3822浏览 • 1回复待解决

提问

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

相关讨论帖

开源项目 HTML DOM：解决原生 JS 中的常见 DOM 任务 0回复

内联JavaScript应该放在HTML的哪个位置 0回复

JavaScript中如何限制你的构造函数只能当作构造函数调用 0回复

JavaScript中[]、{}、()的区别 0回复

JavaScript 中的 Object 0回复

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