Flutter移动端与Web端WebView通信：移动端回复消息接收问题

1. Web端监听全局message事件 #

Flutter移动端通过window.postMessage发送的消息，Web端需通过监听浏览器全局的message事件来捕获。在Web端的JavaScript代码中添加如下逻辑：

// 监听消息事件
window.addEventListener('message', function(event) {
    // 可选：验证消息来源，防止接收非法消息
    // if (event.origin !== 'http://localhost:59295') return;

    // 处理接收到的回复
    console.log('来自移动端的回复:', event.data);
    if (event.data === 'answer') {
        // 此处添加你的业务处理逻辑，比如更新页面内容、触发后续操作等
    }
});

2. 优化消息格式（可选，用于多场景交互） #

如果后续需要区分不同类型的消息交互，建议使用JSON格式传递消息，提升扩展性：

Flutter移动端修改发送逻辑 #

await _webViewController!
    .runJavaScript("""
window.postMessage({
    action: 'get_endpoint_response',
    content: 'answer'
}, 'http://localhost:59295'); // 替换为你的Web端实际域名，替代*提升安全性
""");

Web端对应处理逻辑 #

window.addEventListener('message', function(event) {
    if (event.origin !== 'http://localhost:59295') return;
    
    if (event.data.action === 'get_endpoint_response') {
        console.log('端点查询回复:', event.data.content);
        // 执行对应业务逻辑
    }
});

关键注意点 #

• 避免使用*作为postMessage的目标源，指定具体域名可提升跨域安全性。
• 确保Web端的监听代码在页面加载完成后执行（例如放在DOMContentLoaded事件回调中，或页面底部的<script>标签内），防止错过消息。

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