如何通过Flutter WebView JS Channel从JavaScript向Dart传递多参数

首先纠正JavaScript端的调用误区：postMessage的第二个参数是目标源（targetOrigin），不是要传递的参数。如果要传x和y，需要把它们包装成一个对象或数组作为第一个参数传递。

JavaScript端正确调用方式 #

// 推荐用对象传递，可读性更强
setPosition.postMessage({ x: 100, y: 200 }, 'https://your-safe-origin.com');

// 也可以用数组传递
// setPosition.postMessage([100, 200], 'https://your-safe-origin.com');

注意：生产环境不要用*作为targetOrigin，必须指定具体的可信源，避免安全风险。

Dart端消息回调处理 #

在Dart中，通过MessageChannel的onMessage监听消息，从MessageEvent的data属性中解析x和y：

解析对象格式的消息 #

import 'dart:html'; // Web环境需引入

// 创建对应名称的MessageChannel
final setPositionChannel = MessageChannel('setPosition');

// 监听消息回调
setPositionChannel.onMessage.listen((MessageEvent event) {
  // 将data转为Map，提取x和y
  final positionData = event.data as Map<String, dynamic>;
  final double x = positionData['x'] as double;
  final double y = positionData['y'] as double;

  // 执行你的处理逻辑
  print('获取到位置参数：x=$x, y=$y');
  // 例如更新组件位置、触发动画等
});

解析数组格式的消息（如果JS端用数组传递） #

setPositionChannel.onMessage.listen((MessageEvent event) {
  final positionArray = event.data as List<dynamic>;
  final double x = positionArray[0] as double;
  final double y = positionArray[1] as double;

  // 处理逻辑...
});

内容的提问来源于stack exchange，提问作者Ryan Tshovu