vue中与iframe跨源通信

window.postMessage()

该window.postMessage()方法可以安全地实现对象之间的跨域通信Window；例如，在页面和它生成的弹出窗口之间，或者在页面和嵌入其中的 iframe 之间。

通常，当且仅当它们源自的页面共享相同的协议、端口号和主机（也称为“同源策略”）时，不同页面上的脚本才被允许相互访问。 window.postMessage()提供了一种受控机制来安全地规避此限制（如果使用得当）。

广义上讲，一个窗口可以获取对另一个窗口的引用（例如，通过 targetWindow = window.opener），然后 MessageEvent在其上使用调度一个targetWindow.postMessage()。然后接收窗口可以根据需要自由处理此事件。传递给window.postMessage() （即“消息”）的参数通过事件对象暴露给接收窗口。

语法：

postMessage(message, targetOrigin)
postMessage(message, targetOrigin, transfer)

简单来说，message=消息内容，targetOrigin=接收者，targetWindow=发送者，transfer=相当于附件，跟message一起传递，传递过后自己不可再用

具体语法说明：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

 

第一步：确定发送窗口（vue中内嵌iframe页面）和接收窗口（vue页面）

第二步：代码实现（简单实现）

iframe：

<script>
  window.parent.postMessage({
    data: {} // 传递的数据
}, '*')
</script>

vue：

mounted() {
    window.addEventListener('message', this.receiveMessage)
},
methods: {
    // 处理函数
    receiveMessage(event) {
        // 处理逻辑     
　　　　}
}

补充说明：更深层次用法，根据情况参考文档即可。记录一个用法window.attachEvent，同样起到事件监听的作用，适用于ie浏览器；window.addEventListener()兼容主流浏览器（火狐，谷歌等）；

window.attachEvent()用法可参考：https://www.jb51.net/article/66111.htm

参考文章：https://blog.csdn.net/jianjian_19/article/details/124129516

前端小白一枚，欢迎大家指正！