鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

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

全部课程厂商认证 IT技术 25年5月软考 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消息通信

450浏览 • 1回复待解决

HarmonyOS ArkTS与H5交互方法

533浏览 • 1回复待解决

h5与应用端的sdk通信问题

760浏览 • 1回复待解决

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

541浏览 • 1回复待解决

HarmonyOS H5和原生交互

572浏览 • 1回复待解决

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

849浏览 • 1回复待解决

HarmonyOS h5和ArkTS通信

728浏览 • 1回复待解决

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

983浏览 • 1回复待解决

HarmonyOS h5 window.history 无效

426浏览 • 1回复待解决

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

1049浏览 • 0回复待解决

HarmonyOS web原生和H5如何交互？

1115浏览 • 1回复待解决

HarmonyOS h5和HarmonyOS怎么通信？

417浏览 • 1回复待解决

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

527浏览 • 1回复待解决

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

888浏览 • 1回复待解决

HarmonyOS H5调用原生扫码功能

520浏览 • 1回复待解决

HarmonyOS web与H5交互

1241浏览 • 1回复待解决

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

854浏览 • 1回复待解决

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

450浏览 • 1回复待解决

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

585浏览 • 1回复待解决

H5原生调JSbrige的demo示例

678浏览 • 1回复待解决

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

302浏览 • 1回复待解决

HarmonyOS 原生和H5页面交互

380浏览 • 1回复待解决

HarmonyOS H5打开原生相机

456浏览 • 1回复待解决

HarmonyOS webview与原生通信

560浏览 • 1回复待解决

HarmonyOS H5和app通信是否有传输上限

208浏览 • 1回复待解决

提问

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

相关讨论帖

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

webview加载Vue h5失败 0回复

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

HarmonyOS - JavaUI 框架之使用WebView加载本地H5页面 1回复

H5通过url scheme拉起对应应用 0回复

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