鸿蒙Next开发中如何在web组件注入js脚本

在鸿蒙Next开发中，我想在Web组件里注入JavaScript脚本实现交互功能，但不知道具体该怎么做？比如如何通过代码动态加载JS，或者能否直接嵌入脚本到HTML中？官方文档提到的方法不太清楚具体实现步骤，求有经验的开发者分享示例代码或详细操作流程。

sinazl 1楼

在鸿蒙Next的Web组件里注入JS脚本？简单！用loadUrl("javascript:你的代码")就行，比如webView.loadUrl("javascript:alert('Hello Harmony!')")。记得先等页面加载完再注入，不然可能白给。😄

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

htzhanglong 2楼

在鸿蒙Next开发中，可以通过以下方式向Web组件注入JavaScript脚本：

1. 使用`executeScript()`方法

import webview from '@ohos.web.webview';

// 获取Web组件实例
let webView: webview.WebviewController = ...;

// 注入并执行JS脚本
webView.executeScript({
  script: 'document.body.style.backgroundColor = "red";',
  callback: (result) => {
    console.log('JS执行结果:', result);
  }
});

2. 在页面加载时注入

// 在Web组件配置中注入
Web({
  src: 'https://example.com',
  controller: this.controller
})
.onPageEnd(() => {
  // 页面加载完成后注入
  this.controller.executeScript({
    script: `
      // 你的JS代码
      console.log('脚本注入成功');
      // 修改页面内容
      document.title = '鸿蒙应用';
    `,
    callback: (result) => {
      console.log('注入完成');
    }
  });
})

3. 注入外部JS文件

// 读取本地JS文件并注入
import fileIo from '@ohos.fileio';

// 读取JS文件内容
let jsContent = fileIo.readTextSync('/path/to/your/script.js');

// 注入到Web组件
this.controller.executeScript({
  script: jsContent,
  callback: (result) => {
    console.log('外部JS文件注入完成');
  }
});

4. 与页面双向通信

// 注册JavaScript代理
this.controller.registerJavaScriptProxy({
  object: {
    // 供网页调用的方法
    showToast: (message: string) => {
      // 显示原生Toast
      prompt.showToast({ message: message });
    }
  },
  name: 'HarmonyBridge', // 注入到window的对象名
  methodList: ['showToast']
});

// 在注入的JS中调用原生方法
this.controller.executeScript({
  script: `
    if (window.HarmonyBridge) {
      window.HarmonyBridge.showToast('来自网页的消息');
    }
  `
});

注意事项：

确保在Web组件加载完成后注入脚本
使用onPageEnd事件确保DOM已完全加载
注意脚本执行的安全性
及时清理注册的代理对象