window.postMessage安全地实现跨源通信
作者：互联网
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。
otherWindow.postMessage(message, targetOrigin, [transfer]);
例如：vue项目中，调用iframe子网页中的方法 和在iframe子页面中调用vue父页面中的方法。
父页面代码：
<body>
<h1>我是父页面</h1>
<iframe src="http://127.0.0.1:5050" frameborder="0" style="height: 100%;width: 100%"></iframe>
<script>
function fatherFunction() {
alert('我是父页面中的方法！')
}
window.addEventListener('message', function(e){
console.log(e) //{data:'params'}
fatherFunction()
})
</script>
</body>
子页面代码：
<template>
<div class="weather-app" :class="currentWeatherBG">
<button @click="test">我是子页面按钮，点击调用父页面方法</button>
</div>
</template>
<script>
export default {
methods: {
test() {
window.parent.postMessage({
data :"params"
},'*');
},
}
}
</script>
可以看到，这里关键是子页面通过postMessage方法实现的通信，postMessage的使用方法为：
otherWindow.postMessage(message, targetOrigin, [transfer]);
message为需要传递的信息，
targetOrigin为指定哪些窗口能接收到消息事件，可以为’*’，但是这样很不安全，建议根据实际项目精确匹配。
而父页面则只需要添加事件监听器，在回调中执行需要执行方法或者使用参数。
window.addEventListener('message', function(e){
console.log(e) //{data:'params'}
fatherFunction()
})
标签：postMessage,窗口,跨源,window,message,方法,页面 来源： https://www.cnblogs.com/baixiaoxiao/p/15403161.html