vue中iframe使用和postMessage相关

Question

如上图
1 在组件中引入对象
2.点击事件触发以后，送信处理执行
3.外部监听事件并没有被执行 理由是什么？

按照下面的回复又改了下处理，还是没有执行。event.data 里面不是想要的数据。

这个是其他地方执行的好像

如果把contentwindow对象换成 window 就可以执行了。
下图第一种写法可以，第二种写法不可以。为什么？
网上找相关的代码，大家用的是第二种写法。

Answer 1

你确定没有执行？接收到一个数据后要先打印这个数据，看是什么，你把return放在顶部怎么便于观察

Answer 2

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

请看https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage, 你的iframe的url是否属同一个domain和协议呢？

Answer 3

我认为你第一种写法是正确的，我尝试了一下，可以收到消息。
我猜之所以你第一种方法里的targetIframe.contentWindow.postMessage方法发出的消息，targetWindow收不到，反而换成window.postMessage能收到的原因是scrom.js脚本被当前window的document引入了，而没有被iframe的source引入。