vue中postMessage失效

Question

我在使用vue时在其中嵌入了html文件并用postMessage通信，但在处理返回的信息时发现，第一个postMessage能够正常向html发送信息，第二个postMessage却不能，这是怎么回事呢？

                handleMessage(event) {
                // 获取从iframe页面中传过来的值
                this.$refs.iframe.contentWindow.postMessage("message", '*');
                const data = event.data
                switch (data.cmd) {
                    case 'search_Book':
                        API({
                            url:'/book_search',
                            method:'post',
                            data:{
                                ...
                            }
                            }).then((response)=>{                                
                                this.$refs.iframe.contentWindow.postMessage("message", '*');
                            })
                        break;
                    
                    default:
                        
                }
                }

Answer 1

基于new bing部分指引作答：
从您提供的代码片段来看，您使用Vue中的postMessage方法与嵌入的HTML文件进行通信。然而，在处理返回的信息时，第一个postMessage可以正常发送信息给HTML文件，但第二个postMessage却无法正常工作。

有几个可能的原因导致这种情况发生：

1、事件监听器未正确设置：确保您正确地设置了事件监听器来处理来自HTML文件的消息。请确保在Vue组件中添加了事件监听器，以便处理消息。

2、iframe加载延迟：如果第二个postMessage在iframe尚未完全加载之前被调用，它可能无法正常工作。确保第二个postMessage在iframe完全加载之后调用。您可以使用iframe元素的load事件来检测iframe是否已加载完毕，并在事件处理程序中执行第二个postMessage。

示例代码：

handleMessage(event) {
  const data = event.data;
  switch (data.cmd) {
    case 'search_Book':
      API({
        url:'/book_search',
        method:'post',
        data:{
          // ...
        }
      }).then((response) => {                                
        this.$refs.iframe.addEventListener('load', () => {
          this.$refs.iframe.contentWindow.postMessage("message", '*');
        });
      });
      break;
    default:
      // ...
  }
}

3、跨域安全策略限制：浏览器的安全策略可能会限制从一个域向另一个域发送消息。确保HTML文件与Vue应用在相同的域中，或者确保在服务器端进行适当的跨域配置。

如果上述解决方法都无效，建议在浏览器的开发者工具中查看控制台是否有任何错误消息，并确保Vue组件和HTML文件之间的通信机制正确设置。