标签：postMessage 窗口 跨源 window message 方法 页面
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。