Flutter InAppWebView：如何将自定义事件数据传递给Handler函数

问题出在你调用window.flutter_inappwebview.callHandler时，没有把自定义事件携带的detail参数传进去，导致Flutter端的callback接收不到数据。

修正后的Web端事件监听代码 #

在onPageLoaded中注入的JS代码需要修改，将事件的detail作为参数传给Flutter的handler：

window.addEventListener('myCustomEvent', function(event) {
  // 传递自定义事件的detail参数给Flutter handler
  window.flutter_inappwebview.callHandler('myHandlerName', event.detail);
});

Flutter端对应的Handler实现 #

确保handler正确接收并解析参数：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的目标网页地址")),
  onWebViewCreated: (controller) {
    controller.addJavaScriptHandler(
      handlerName: 'myHandlerName',
      callback: (args) {
        // args[0]即为Web端传入的detail对象
        if (args.isNotEmpty) {
          final detail = args[0] as Map<String, dynamic>;
          print('接收参数：foo=${detail['foo']}, bar=${detail['bar']}');
          // 这里可以根据业务需求处理参数
        }
      },
    );
  },
  onPageLoaded: (controller) {
    // 注入事件监听代码
    controller.evaluateJavascript(source: """
      window.addEventListener('myCustomEvent', function(event) {
        window.flutter_inappwebview.callHandler('myHandlerName', event.detail);
      });
    """);
  },
)

验证说明 #

你原本的Web端事件派发代码是正确的：

const event = new CustomEvent("myCustomEvent", {
    detail: {foo: 1, bar: false}
});
window.dispatchEvent(event);

只要在监听事件时把event.detail作为参数传递给callHandler，Flutter端的args列表就会包含该参数，不会再是空列表。

内容的提问来源于stack exchange，提问作者Shailendra Madda