Angular网页与Flutter WebView（webview_flutter）通信问题求助

问题根源 #

你当前的代码用了两套不兼容的通信机制：Flutter端通过addJavaScriptChannel注册了名为imageDownload的通信通道，但Angular端却用window.parent.postMessage发送消息，这两种方式无法互通。

修正方案 #

1. 修正Angular端代码

直接调用Flutter注册的JavaScript Channel对象发送消息，替代window.parent.postMessage：

// 按钮点击事件示例
onSendMessageToFlutter() {
  // 先判断通道是否存在，避免报错
  if (window['imageDownload']) {
    window['imageDownload'].postMessage("Check message is receiving");
  }
}

如果需要保留平台判断，可调整为：

const userAgent = navigator.userAgent;
if(userAgent.includes('Win')){
  // Windows相关逻辑
}else if (userAgent.includes('Android') || userAgent.includes('iOS')) {
  if (window['imageDownload']) {
    window['imageDownload'].postMessage("Check message is receiving");
  }
}

2. 修复Flutter端的编译错误

你的Flutter代码中onWebResourceError的print语句缺少引号，会导致编译失败，修正后：

onWebResourceError: (WebResourceError error) {
  print("-------------onWebResourceError-------------");
},

关键注意事项 #

• 通道名称大小写敏感：Flutter注册的imageDownload必须和Angular中调用的window['imageDownload']完全一致，包括大小写。
• 确保WebView加载完成后再发消息：Angular端尽量在页面初始化完成（如ngAfterViewInit生命周期钩子）或用户交互（如按钮点击）时发送消息，避免在页面未加载完成时调用不存在的通道。
• JavaScript模式必须开启：你已经设置了JavaScriptMode.unrestricted，这是通信的必要前提，不能关闭。

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