HarmonyOS 鸿蒙Next web 组件，注入 js 来获取 html 文本里的所有图片，并为图片添加点击事件

web 组件，注入 js 来获取 html 文本里的所有图片，并为图片添加点击事件

注入js可以使用web组件的runJavaScript方法，可异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。

示例如下：

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();
  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }
  runJavaScript() {
    //注入js方法
    this.webviewController.runJavaScript(`
          function getImages(){
             var objs = document.getElementsByTagName('img');
             var imgScr = '';
             for(var i=0;i<objs.length;i++){
               imgScr = imgScr + objs[i].src + 'A+++A';
             }
             return imgScr
          }
          function registerImageClickAction(){
             var imgs = document.getElementsByTagName('img');
             var length = imgs.length;
             for(var i=0;i<length;i++){
               img = imgs[i];
               img.onclick = function(){
                  window.location.href = this.src
               }
             }
          }`);
  }
  build() {
    Column() {
      Button('调用js方法').onClick(() => {
        this.webviewController.runJavaScript('registerImageClickAction()');
        this.webviewController.runJavaScript('getImages()', (error, result) => {
          if (error) {
            console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            return;
          }
          if (result) {
            console.info(`The getImages() return value is: ${result}`);
          }
        });
      })
      Web({ src: $rawfile('index.html'), controller: this.webviewController }).onPageEnd(() => {
        //网页加载完成时执行注入js方法
        this.runJavaScript()
      })
    }
  }
}

API参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#runjavascript

web组件与页面交互参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-in-app-frontend-page-function-invoking-V5

itying888 2楼•2 天前作者

在HarmonyOS鸿蒙Next Web组件中，你可以通过注入JavaScript代码来获取HTML文本里的所有图片，并为它们添加点击事件。以下是实现这一功能的简要步骤：

获取WebView实例：首先，确保你已经有一个WebView组件，并且已经加载了目标HTML页面。
注入JavaScript代码：使用WebView的evaluateJavascript方法（或类似功能）注入JavaScript代码。这段代码应该遍历DOM中的所有<img>元素，并为它们添加点击事件监听器。

JavaScript代码示例：

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('click', function() {
        // 处理点击事件，例如显示图片大图或执行其他逻辑
        alert('Image clicked: ' + this.src);
    });
}

确保代码执行时机：确保JavaScript代码在页面完全加载后执行。你可以在页面的onload事件中或在确保页面DOM完全构建后执行注入代码。
处理回调和结果：根据WebView的API，处理JavaScript执行结果或回调（如果适用）。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html