Flutter Web环境下WebView如何添加JavaScript通信通道？

由于webview_flutter_web并未实现addJavaScriptChannel方法，你可以通过以下几种Web原生的交互方式来替代实现Flutter与HTML/JS的通信：

方案一：使用dart:js直接绑定全局函数 #

通过Flutter的dart:js包，直接在全局JS上下文注册可调用的Flutter方法，同时也能调用HTML中的JS函数，实现双向通信。

Flutter端代码 #

import 'dart:js' as js;

// 注册供JS调用的Flutter方法
void registerJsCallback() {
  // 给全局window对象挂载flutterChannel方法
  js.context['flutterChannel'] = (String message) {
    // 处理JS传递的消息
    print('JS传来的消息：$message');
    // 可在这里执行Flutter端逻辑
  };
}

// 调用HTML中的JS方法
void invokeJsFunction(String message) {
  // 调用HTML里定义的jsReceiveMessage函数
  js.context.callMethod('jsReceiveMessage', [message]);
}

HTML端代码 #

<script>
// 向Flutter发送消息
function sendToFlutter(message) {
  // 检查全局方法是否存在，避免报错
  if (window.flutterChannel) {
    window.flutterChannel(message);
  }
}

// 供Flutter调用的JS方法
function jsReceiveMessage(message) {
  console.log('Flutter传来的消息：' + message);
  // 执行JS端逻辑
}
</script>

方案二：使用HTML5 postMessage 跨上下文通信 #

如果你的WebView底层是iframe实现（webview_flutter_web默认如此），可以利用HTML5的postMessage API实现跨窗口通信，这种方式更安全，支持跨域验证。

Flutter端代码 #

import 'dart:html' as html;
import 'dart:js' as js;

// 监听HTML发来的message事件
void setupMessageListener() {
  html.window.addEventListener('message', (html.Event event) {
    final messageEvent = event as html.MessageEvent;
    // 验证消息来源，防止恶意通信
    if (messageEvent.origin == 'http://localhost:8080') { // 替换为你的HTML文件地址
      print('通过postMessage收到消息：${messageEvent.data}');
      // 回复消息给HTML
      (messageEvent.source as html.Window?)?.postMessage('已收到消息', messageEvent.origin);
    }
  });
}

// 向HTML发送消息
void sendMessageToHtml(String message) {
  // 获取webview对应的iframe元素（需确认webview_flutter_web生成的iframe id，可通过浏览器调试查看）
  final iframe = html.document.querySelector('iframe') as html.IFrameElement?;
  iframe?.contentWindow?.postMessage(message, 'http://localhost:8080'); // 替换为HTML地址
}

HTML端代码 #

<script>
// 向Flutter发送消息
function sendToFlutter(message) {
  // 发送消息给父窗口（Flutter Web）
  window.parent.postMessage(message, 'http://localhost:5000'); // 替换为Flutter Web的运行地址
}

// 监听Flutter发来的消息
window.addEventListener('message', (event) => {
  if (event.origin === 'http://localhost:5000') { // 替换为Flutter Web地址
    console.log('Flutter传来的消息：' + event.data);
  }
});
</script>

方案三：使用支持JS通信的替代WebView包 #

可以选择flutter_inappwebview这类跨平台WebView包，它的Web端实现完整支持JavaScript通道、postMessage等通信能力，配置后能和移动端保持一致的调用方式，但需要额外引入依赖并适配配置。

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