鸿蒙Next中如何使用evaluatejavascript方法

在鸿蒙Next开发中，我需要通过Web组件与页面内的JavaScript进行交互。请问具体如何使用evaluateJavascript方法？能否提供一个调用示例，包括参数传递和返回值处理的方式？另外，这个方法有哪些使用限制或注意事项？

2 回复

在鸿蒙Next中，evaluateJavaScript 方法可以通过 WebView 组件调用，用于执行JavaScript代码。示例：

webview.evaluateJavaScript('alert("Hello, Harmony!")')
  .then(result => console.log('执行成功:', result))
  .catch(error => console.error('执行失败:', error));

注意：确保WebView已加载完成再调用，否则可能无效哦～（代码虽短，别忘异常处理！）

更多关于鸿蒙Next中如何使用evaluatejavascript方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过WebView组件的runJavaScript方法执行JavaScript代码，类似于Android中的evaluateJavascript方法。以下是具体使用方法：

1. 导入相关模块

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

2. 创建WebView组件

在ArkUI中声明WebView：

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

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

3. 执行JavaScript代码

使用runJavaScript方法：

// 执行简单JS代码
this.controller.runJavaScript(
  'alert("Hello HarmonyOS")',
  (error, result) => {
    if (error) {
      console.error('执行JS失败:', error);
    } else {
      console.info('JS执行结果:', result);
    }
  }
);

// 获取页面标题示例
this.controller.runJavaScript(
  'document.title',
  (error, result) => {
    if (!error) {
      console.info('页面标题:', result);
    }
  }
);

4. 注意事项

  • 确保在页面加载完成后执行（可在onPageEnd回调中调用）
  • 需要配置网络权限：ohos.permission.INTERNET
  • 返回值通过回调函数获取，支持基本数据类型

完整示例：

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

@Entry
@Component
struct MyWebView {
  controller: webview.WebviewController = new webview.WebviewController();

  onPageEnd() {
    // 页面加载完成后执行JS
    this.controller.runJavaScript(
      'document.title',
      (error, result) => {
        console.info('当前页面标题:', result);
      }
    );
  }

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

这种方法可以实现Web页面与HarmonyOS原生应用之间的双向通信，用于获取页面数据或调用页面中的JS函数。

回到顶部