鸿蒙开发者社区

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中触发原生的调用定位相关的示例实现

310浏览 • 1回复待解决

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

2618浏览 • 1回复待解决

HarmonyOS h5与原生交互，在原生实现的js方法中怎么获取到webController，用于调用runJavaScript方法？

127浏览 • 1回复待解决

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

274浏览 • 1回复待解决

ArkTS 如何实现类型推断?与 JavaScript、TypeScript 的区别

42浏览 • 0回复待解决

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

8008浏览 • 1回复待解决

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

2010浏览 • 1回复待解决

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

130浏览 • 1回复待解决

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

241浏览 • 1回复待解决

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

253浏览 • 1回复待解决

HarmonyOS WebView loaddata 无法完全展示html中的内容

117浏览 • 1回复待解决

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

522浏览 • 1回复待解决

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

466浏览 • 1回复待解决

使用web组件如何动态的去监听h5中html中的title标签中的标题的变化？

69浏览 • 1回复待解决

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

2196浏览 • 1回复待解决

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

1887浏览 • 1回复待解决

ArkWeb里调用原生相机的能力是否有对应代码样例参考？

115浏览 • 1回复待解决

HarmonyOS 原生跟h5交互现在有没有合适的框架，只使用webview不行，功能受限，h5不能调用原生的功能

113浏览 • 1回复待解决

Web组件通过javaScriptProxy方法注册多个javascript对象，只会保留最后一个注册的javascript对象

99浏览 • 1回复待解决

HarmonyOS js调用webview中的方法

310浏览 • 1回复待解决

webview的oninterceptrequest中调用异步操作

1930浏览 • 1回复待解决

HarmonyOS关于JSVM中创建原生对象的生命周期问题

274浏览 • 1回复待解决

如何调用nodejs中的组件库

984浏览 • 1回复待解决

H5调用相机、相册使用哪个原生接口？

113浏览 • 1回复待解决

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

4123浏览 • 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版权所有未经许可请勿转载