鸿蒙Next中如何在WebView注入js文件

在鸿蒙Next开发中，我想在WebView组件里加载并执行本地的JS文件，但不知道具体该如何实现。请问应该如何正确注入JS文件？是否需要特定的配置或API？能否提供一个简单的代码示例？

2 回复

在鸿蒙Next中，可以通过WebView的executeJs方法注入JS代码。具体步骤：

  1. 获取WebView组件实例
  2. 使用executeJs()方法执行JS代码

示例代码：

// 导入webview
import webview from '@ohos.web.webview';

// 获取WebView实例
let webviewController = webview.WebviewController.getController(this.webviewComponent);

// 注入JS文件内容
webviewController.executeJs(`
  // 你的JS代码
  console.log('JS注入成功');
  document.title = '修改后的标题';
`, (error, result) => {
  if (error) {
    console.error('JS执行失败');
    return;
  }
  console.log('JS执行结果：' + result);
});

注意事项：

  • 需要在页面加载完成后注入（可在onPageEnd回调中执行）
  • 支持ES5语法
  • 可通过文件管理器读取本地JS文件内容后注入

更多关于鸿蒙Next中如何在WebView注入js文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过WebView组件的injectJavaScript方法注入JavaScript文件或代码。以下是具体步骤：

1. 加载本地JS文件

将JS文件放在项目的resources/rawfile目录下，然后通过WebView注入：

import webview from '[@ohos](/user/ohos).web.webview';
import resourceManager from '[@ohos](/user/ohos).resourceManager';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebViewExample {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 加载本地JS文件
    let jsContent: string = '';
    try {
      let resource = resourceManager.getRawFileContentSync('inject.js');
      jsContent = String.fromCharCode.apply(null, resource);
    } catch (error) {
      console.error('Failed to load JS file: ' + error);
    }

    // 注入JS代码
    this.controller.injectJavaScript({
      script: jsContent,
      callback: (error) => {
        if (error) {
          console.error('JS injection failed: ' + error);
        } else {
          console.info('JS injected successfully');
        }
      }
    });
  }

  build() {
    Column() {
      Web({
        src: 'https://example.com',
        controller: this.controller
      })
    }
  }
}

2. 直接注入JS代码

若无需外部文件，可直接写入JS字符串：

this.controller.injectJavaScript({
  script: 'console.log("Hello from injected JS!");',
  callback: (error) => {
    // 处理回调
  }
});

注意事项：

  • 时机选择：建议在onPageEnd事件中注入，确保页面加载完成。
  • 文件路径：JS文件必须放在rawfile目录，使用getRawFileContentSync读取。
  • 权限：确保应用具有ohos.permission.INTERNET权限（网络访问）。

通过以上方法，即可在鸿蒙Next的WebView中灵活注入JavaScript代码或文件。

回到顶部