Flutter中如何使用window.flutter_inappwebview.callhandler

我在Flutter项目中使用flutter_inappwebview插件时遇到了问题。具体是想通过window.flutter_inappwebview.callhandler方法来调用Flutter端的函数，但不知道正确的使用方法。我已经尝试了以下代码：

onLoadStop: (controller, url) async {
  await controller.evaluateJavascript(source: """
    window.flutter_inappwebview.callHandler('handlerName', 'data');
  """);
}

但在Flutter端没有收到任何回调。请问这个方法的正确调用方式是什么？是否需要先在Flutter端注册handler？能否提供一个完整的示例？


更多关于Flutter中如何使用window.flutter_inappwebview.callhandler的实战教程也可以访问 https://www.itying.com/category-92-b0.html

2 回复

在Flutter中，使用window.flutter_inappwebview.callHandler调用JavaScript方法。首先确保已导入flutter_inappwebview包，然后在WebView中注册处理器，使用callHandler('方法名', [参数])进行调用。

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


在 Flutter 中使用 window.flutter_inappwebview.callHandler 需要结合 flutter_inappwebview 插件实现 JavaScript 与 Flutter 之间的通信。以下是详细步骤：

1. 安装插件

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_inappwebview: ^6.0.0

运行 flutter pub get 安装。

2. 基本用法

Flutter 端设置

在 Flutter 中注册处理器并调用 JavaScript 方法：

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebViewController? webViewController;

// 注册处理器供 JavaScript 调用
void registerHandlers() {
  if (webViewController != null) {
    webViewController!.addJavaScriptHandler(
      handlerName: 'myHandler', // JavaScript 中使用的名称
      callback: (args) {
        // 处理来自 JavaScript 的数据
        print('收到数据: $args');
        return 'Flutter 返回的数据';
      },
    );
  }
}

// 调用 JavaScript 中的函数
void callJavaScriptHandler() async {
  if (webViewController != null) {
    final result = await webViewController?.callHandler(
      handlerName: 'jsHandler', // JavaScript 中定义的处理器名
      arguments: ['参数1', {'key': 'value'}], // 可传多个参数
    );
    print('JavaScript 返回: $result');
  }
}

HTML/JavaScript 端

在 WebView 加载的页面中定义对应的处理器：

<script>
// 注册供 Flutter 调用的处理器
window.flutter_inappwebview.callHandler('jsHandler', ...args)
  .then(function(result) {
    console.log('Flutter 返回: ' + result);
  });

// 供 Flutter 调用的函数
function myFunction() {
  // 调用 Flutter 处理器
  window.flutter_inappwebview.callHandler('myHandler', 'Hello from JS', 123)
    .then(function(response) {
      console.log('Flutter 响应: ' + response);
    });
}
</script>

3. 完整示例

InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri('https://example.com')),
  onWebViewCreated: (controller) {
    webViewController = controller;
    registerHandlers();
  },
  onLoadStop: (controller, url) {
    // 页面加载完成后调用 JavaScript
    callJavaScriptHandler();
  },
)

注意事项

  1. 处理器名称一致：确保 Flutter 和 JavaScript 中的处理器名称完全匹配。
  2. 参数类型：支持基本类型、List 和 Map，复杂对象需序列化。
  3. 时机控制：在 onLoadStop 确认页面加载完成后再调用处理器。
  4. 错误处理：使用 try-catch 处理可能的通信异常。

通过这种方式，可以轻松实现 Flutter 与 WebView 内容之间的双向数据交互。

回到顶部