Flutter中如何使用flutter_inappwebview插件调用javascript方法

我在Flutter项目中使用了flutter_inappwebview插件加载网页，现在需要从Dart端调用网页中的JavaScript方法，但不知道具体该如何实现。请问应该如何正确地使用flutter_inappwebview插件来调用网页中的JS函数？能否提供一个完整的代码示例，包括如何初始化WebView和调用JS方法的步骤？另外，如果需要传递参数给JS方法，又该如何处理呢？

2 回复

在Flutter中使用flutter_inappwebview调用JavaScript方法，可通过InAppWebViewController的evaluateJavascript方法实现。示例代码如下：

controller.evaluateJavascript(source: "yourJavaScriptFunction();");

其中controller为WebView控制器，需在onWebViewCreated回调中获取。

更多关于Flutter中如何使用flutter_inappwebview插件调用javascript方法的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用flutter_inappwebview插件调用JavaScript方法，可以通过InAppWebViewController的evaluateJavascript()方法实现。以下是具体步骤和示例代码：

步骤：

  1. 添加依赖到pubspec.yaml：
    dependencies:
  flutter_inappwebview: ^6.0.0
  2. 在代码中导入包：
    import 'package:flutter_inappwebview/flutter_inappwebview.dart';
  3. 创建InAppWebViewController实例，并在需要时调用evaluateJavascript()。

示例代码：

InAppWebViewController? webViewController;

// 在InAppWebView组件中设置controller
InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
)

// 调用JavaScript方法
void callJavaScriptFunction() async {
  if (webViewController != null) {
    // 执行JavaScript代码
    var result = await webViewController!.evaluateJavascript(
      source: "yourJavaScriptFunction();"
    );
    print('JavaScript执行结果: $result');
  }
}

说明：

  • 调用无参函数：直接写函数名，例如"myFunction();"
  • 调用有参函数：传递参数，例如"myFunction('参数');"
  • 获取返回值：evaluateJavascript()返回Future<dynamic>，可接收JavaScript返回值
  • 错误处理：建议用try-catch包装，避免JavaScript执行错误导致应用崩溃

注意事项：

  • 确保WebView已加载完成再调用JavaScript（可在onLoadStop回调中执行）
  • 复杂数据需通过JSON序列化传递
  • 支持ES6语法，但需注意目标平台兼容性

通过这种方式，可以灵活实现Flutter与Web页面的双向通信。

回到顶部