鸿蒙开发者社区

公众号矩阵

移动端

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

全部课程软考信创认证华为认证厂商认证 IT技术 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 如何在ArkTS中编写原生组件，并使用requireNativeComponent暴露给JavaScript调用

831浏览 • 1回复待解决

HarmonyOS 原生解析html的诉求

1029浏览 • 1回复待解决

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

1633浏览 • 1回复待解决

javascript中的RSA加密方法在HarmonyOS里面怎么实现

931浏览 • 1回复待解决

#鸿蒙通关秘籍#如何在Node-API中实现多线程JavaScript函数调用？

1419浏览 • 1回复待解决

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

4057浏览 • 1回复待解决

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

1948浏览 • 1回复待解决

#鸿蒙通关秘籍#如何利用JavaScript Profiler中的时序火焰图进行函数调用分析？

1186浏览 • 1回复待解决

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

1486浏览 • 1回复待解决

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

1300浏览 • 0回复待解决

#鸿蒙通关秘籍# 如何通过ArkWeb实现与JavaScript的交互？

2351浏览 • 1回复待解决

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

9642浏览 • 1回复待解决

HarmonyOS WebView加载的H5页面，通过JavaScript捕获方法，如何弹出一个原生的选择框

740浏览 • 1回复待解决

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

1275浏览 • 1回复待解决

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

3164浏览 • 1回复待解决

HarmonyOS 前端页面调用应用侧函数javascript可运行demo（javaScriptProxy）

1100浏览 • 1回复待解决

HarmonyOS 原先使用的Dcloud 5+SDK，通过H5适配模式，能实现plus的原生调用吗？

1427浏览 • 1回复待解决

grpc功能如何在原生HarmonyOS调用

1021浏览 • 1回复待解决

uniapp HarmonyOS版本调用HarmonyOS原生方法报错

1163浏览 • 1回复待解决

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

1124浏览 • 1回复待解决

#鸿蒙通关秘籍#如何通过应用侧调用前端页面的JavaScript函数？

1215浏览 • 1回复待解决

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

967浏览 • 1回复待解决

请问arkts怎么用javascript的库呀

892浏览 • 0回复待解决

HarmonyOS H5调用原生扫码功能

1401浏览 • 1回复待解决

HarmonyOS 如何实现列表，文本内容返回的是html可高亮

844浏览 • 1回复待解决

提问

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

相关讨论帖

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

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

JavaScript 中"$"的含义 0回复

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

JavaScript 中的 Object 0回复

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