HTML向Flutter WebView发消息：Android正常Web端postMessage无效求助

针对你遇到的Android端JavascriptChannel正常，但Web端无法使用的问题，这是因为webview_flutter_web对JavascriptChannel的实现逻辑和原生Android不同——原生会直接注入全局对象（比如newPoint），但Web端需要通过window.postMessage配合特定格式来传递消息。下面给出两种可行的实现方案：

方案1：兼容原有网页JS代码（无需修改网页） #

如果不想改动网页的JS代码，保持newPoint.postMessage()的调用方式，可以在Flutter侧为Web端注入对应的全局对象：

Flutter代码 #

WebView(
  initialUrl: "你的服务器网页链接",
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController controller) {
    // 添加JavaScript通道，处理消息
    controller.addJavaScriptChannel(
      'newPoint',
      onMessageReceived: (JavascriptMessage message) {
        homeController.getClickedPoint(message.message);
      },
    );

    // 注入JS代码，在网页中创建newPoint全局对象
    controller.evaluateJavascript('''
      window.newPoint = {
        postMessage: function(message) {
          window.postMessage({
            channel: 'newPoint',
            message: message
          }, '*');
        }
      };
    ''');
  },
)

这样网页端原来的newPoint.postMessage(...)代码就能在Web端正常运行，消息会被Flutter的JavascriptChannel接收。

方案2：直接修改网页JS代码适配Web端 #

如果允许修改网页的JS代码，可以直接发送符合webview_flutter_web要求的消息格式：

网页端JS代码 #

// 兼容Android和Web端的写法
if (typeof newPoint !== 'undefined') {
  // Android端直接调用
  newPoint.postMessage(clickedPoint.lat() + "," + clickedPoint.lng());
} else {
  // Web端发送特定格式的postMessage
  window.postMessage({
    channel: 'newPoint',
    message: clickedPoint.lat() + "," + clickedPoint.lng()
  }, '*');
}

Flutter代码 #

保持和Android端一致的JavascriptChannel配置即可：

WebView(
  initialUrl: "你的服务器网页链接",
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: {
    JavascriptChannel(
      name: 'newPoint',
      onMessageReceived: (JavascriptMessage message) {
        homeController.getClickedPoint(message.message);
      }
    ),
  },
)

注意事项 #

• 确保javascriptMode设置为JavascriptMode.unrestricted，否则JS代码无法执行。
• window.postMessage的第二个参数（目标源）如果可以确定服务器地址，建议替换为具体URL（比如"https://your-server.com"），避免使用'*'带来的安全风险。

内容的提问来源于stack exchange，提问作者Ahmed Wagdi