https://www.jianshu.com/p/bc397045937e
https://segmentfault.com/a/1190000016258735
https://blog.csdn.net/tang_yi_/article/details/79401280
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
otherWindow.postMessage(message, targetOrigin, [transfer]);
1.otherWindow其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
2.message3.targetOrigin4.transfer 可选Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。<template> <div class=""> <iframe id="test" ref="iframe" height="1000" width="100%" frameborder="no" scrolling="no" :src="src" /> <div @click="sendMessage">向iframe发送信息</div> </div> </template> <script> import { getToken, setToken } from ‘@/utils/auth‘ export default { components: {}, data() { return { src: ‘https://ftctest.btonline365.com/html/Risk/model/model_list.html?token=‘ + getToken() } }, computed: {}, watch: {}, created() {}, mounted() { this.iframeInit() console.log(this.src) }, beforeCreate() {}, beforeMount() {}, beforeUpdate() {}, updated() {}, beforeDestroy() {}, destroyed() {}, activated() {}, methods: { iframeInit() { const iframe = this.$refs.iframe // 处理兼容问题 if (iframe.attachEvent) { // 监听子级返回数据 window.attachEvent( ‘onmessage‘, (e) => { // console.log("父级接收子级返回数据" + e.data); alert(‘iframe页面token失效了啊啊啊啊啊‘) // setToken(JSON.parse(e.data)) // 外部vue向iframe内部传数据 iframe.contentWindow.postMessage({ token: getToken() }, ‘https://ftctest.btonline365.com/html/Risk/model/model_list.html‘) }, false ) } else { // 接受子级返回数据 window.addEventListener( ‘message‘, (e) => { console.log(e.data) // alert(‘iframe页面token失效了‘) // 外部vue向iframe内部传数据 iframe.contentWindow.postMessage(JSON.stringify({ token: getToken() }), this.src) }, false ) } } } } </script>
// 向父vue页面发送信息 window.parent.postMessage({ cmd: ‘returnHeight‘, params: { success: true, data: document.body.scrollHeight + ‘px‘ } }, ‘*‘); // 接受父页面发来的信息 window.addEventListener("message", function(event){ var data = event.data; switch (data.cmd) { case ‘getFormJson‘: // 处理业务逻辑 break; } });
Vue内嵌iframe， 使用postMessage 实现跨域通信
原文：https://www.cnblogs.com/lyt0207/p/13600316.html