鸿蒙开发者社区

公众号矩阵

移动端

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

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

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

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

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

HarmonyOS H5与原生通信，如何直接将方法挂载到window上

H5页面是已经写好且上线的，调用原生的方式为： window.func()

HarmonyOS这边注册的话需要是一个对象，就会导致调用需要改为 window.xxx.func()

如何在不改动H5代码的前提下实现window.func()呢

HarmonyOS

2025-01-09 18:08:56

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

可以试下使用javascriptondocumentstart11直接写window.fun：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#javascriptondocumentstart11

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  private localStorage: string =
    `window.test=()=>{return 'hello world from Native'}`;
  @State scripts: Array<ScriptItem> = [
    { script: this.localStorage, scriptRules: ["*"] }
  ];

  build() {
    Column({ space: 20 }) {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .backgroundColor(Color.Grey)
        .javaScriptOnDocumentStart(this.scripts)
        .width('100%')
        .height('100%')
    }
  }
}

index.html

<!-- index.html -->
  <!DOCTYPE html>
  <html>
  <body>
  <button type="button" onclick="callArkTS()">Click Me!</button>
  <p id="demo"></p>
  <script>
  function callArkTS() {
    <!-- console.dir(window);-->
      let str = test();
    document.getElementById("demo").innerHTML = str;
    console.info('ArkTS Hello World! :' + str);
  }
  </script>
  </body>
  </html>

回复

2025-01-09 20:23:05

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

发布

相关问题

HarmonyOS 原生与webview中的H5消息通信

1136浏览 • 1回复待解决

HarmonyOS ArkTS与H5交互方法

1240浏览 • 1回复待解决

h5与应用端的sdk通信问题

1394浏览 • 1回复待解决

HarmonyOS H5和原生交互

1301浏览 • 1回复待解决

HarmonyOS 怎么能收到H5调用的window方法？

1587浏览 • 1回复待解决

HarmonyOS 使用JSBridge进行H5与app通信数据异常

1235浏览 • 1回复待解决

如何桥接鸿蒙原生与H5之间的交互？

1703浏览 • 2回复已解决

HarmonyOS h5和ArkTS通信

1430浏览 • 1回复待解决

HarmonyOS h5 window.history 无效

1265浏览 • 1回复待解决

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

1917浏览 • 1回复待解决

HarmonyOS web原生和H5如何交互？

1786浏览 • 1回复待解决

HarmonyOS ArkTS主动与H5通信方式是什么

1785浏览 • 1回复待解决

HarmonyOS h5和HarmonyOS怎么通信？

922浏览 • 1回复待解决

HarmonyOS 怎么实现webview暴露方法与H5交互

1221浏览 • 1回复待解决

鸿蒙原生应用如何与内嵌H5页面实现双向通信？有哪些技术方案？

988浏览 • 1回复待解决

HarmonyOS原生中的web组件如何和组件内渲染的h5进行通信

1493浏览 • 1回复待解决

HarmonyOS H5调用原生扫码功能

1382浏览 • 1回复待解决

HarmonyOS web与H5交互

1959浏览 • 1回复待解决

HarmonyOS H5异步调用arkTs函数，arkTs如何将结果返回至H5 ？

1624浏览 • 1回复待解决

HarmonyOS h5原生交互、页面状态机

1081浏览 • 1回复待解决

HarmonyOS h5和原生的交互，h5页面跳转很多层，是否支持拦截H5返回手势

1329浏览 • 1回复待解决

HarmonyOS webview加载H5页面与原生交互jsBrige的实现方式

1029浏览 • 1回复待解决

H5原生调JSbrige的demo示例

1257浏览 • 1回复待解决

HarmonyOS H5打开原生相机

1088浏览 • 1回复待解决

HarmonyOS 原生和H5页面交互

1046浏览 • 1回复待解决

提问

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

相关讨论帖

在HarmonyOS上实现ArkTS与H5的交互 0回复

webview加载Vue h5失败 0回复

轻松上手-Navigation路由 H5 0回复

ArkUI-X与H5混合开发：鸿蒙端“原生+Web”界面的融合方案 0回复

鸿蒙H5离线包技术分享 0回复

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