HarmonyOS鸿蒙Next中通过web组件集成H5页面,new Function调用不能正常获取结果

HarmonyOS鸿蒙Next中通过web组件集成H5页面,new Function调用不能正常获取结果 鸿蒙通过web组件集成H5页面，在H5页面通过new Function这种动态函数调用方式调用鸿蒙注册的函数，能否正常调用成功呢？怎么获取到返回结果呢？

例如：调用方式 const token = new Function(‘window.hm.getToken()’).apply()

3 回复

ArkTs中对JS部分语法存在限制：

eval和new Function无法使用。

若是需要在H5中调用原生侧的方法，可以通过javaScriptProxy，如：

import { webview } from '@kit.ArkWeb';
class TestObj {
  constructor() {
  }

  async test(): Promise<string> {
    let p: string = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success')
      }, 1000);
    });
    return p;
  }
}
@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  testObj = new TestObj();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .javaScriptProxy({
          object: this.testObj,
          name: "objName",
          methodList: ["test"],
          controller: this.controller,
        })
    }
  }
}

<!Document>
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>
<body>
<p id="text">HTML页面内容</p>
<button onclick="new Function('console.log('测试测试测试')')">click</button>
</body>
<script type="text/javascript">
    function clickFun(){
         objName.test().then((str)=>{
            console.log('Promise返回值：',str);
        })
    }
</script>
</html>

更多关于HarmonyOS鸿蒙Next中通过web组件集成H5页面,new Function调用不能正常获取结果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Web组件集成H5页面时，new Function调用异常可能源于鸿蒙的安全沙箱限制。鸿蒙对Web组件的JavaScript执行环境实施了严格的安全策略，禁止动态代码执行。建议检查以下配置：确保Web组件的JavaScript接口已正确启用，验证H5页面的CSP策略是否允许内联脚本执行，并确认new Function的参数格式符合鸿蒙规范。若问题持续，需排查H5代码是否存在兼容性问题。

在HarmonyOS Next中，通过Web组件集成H5页面时，使用new Function动态调用鸿蒙侧注册的JavaScript接口（如window.hm.getToken()）是可行的，但需注意以下几点：

  1. 接口注册与注入
    确保鸿蒙侧已通过WebViewController的registerJavaScriptProxy()方法正确注册了hm对象及getToken方法，并在页面加载前完成注入（例如在onPageBegin回调中调用refreshJavaScriptProxy()）。

  2. 调用时机与上下文
    H5页面中的动态函数调用需在鸿蒙接口注入完成后执行。若页面加载过程中过早调用，可能因接口未就绪而失败。建议在页面onLoad事件或鸿蒙侧通过runJavaScript主动通知后触发。

  3. 返回值传递

    • 若getToken为同步方法，可直接通过new Function获取结果（如示例代码）。
    • 若为异步方法（如涉及Promise或回调），需通过鸿蒙的runJavaScript方法或registerJavaScriptProxy的回调机制传递结果。例如：
      // 鸿蒙侧注册异步方法
hm.getToken = (callback) => {
  // 获取token后回调H5
  callback(token);
};
// H5侧调用
new Function('window.hm.getToken(cb)').apply();

  4. 常见问题排查

    • 检查Web组件的javaScriptAccess属性是否设置为true。
    • 确认H5页面未启用严格模式（'use strict'），否则new Function可能受限。
    • 通过DevEco Studio的Web调试器查看Console日志，确认接口注入及调用过程中的报错信息。

示例代码（鸿蒙侧）：

// 注册JavaScript接口
webViewController.registerJavaScriptProxy({
  hm: {
    getToken: () => {
      return "example_token";
    }
  }
}, "window");

// 页面加载时刷新注入
webViewController.refreshJavaScriptProxy();

通过以上步骤，可确保动态函数调用正常执行并获取返回结果。

回到顶部