通常情况下，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机时，这两个脚本才能相互通信。而在实际项目开发 过程中 ，经常会 利用 ifr am e在一个父页面中嵌入另外一个子页面， 或者 在一个父页面中弹出另一个页面，由于同 源 策略的限制，父子页面之间的脚本无法实现通信，而使用postMessage方法就实现了父子页面之间的跨域信息传递。
语法：
otherWindow.postMessage(message, t arg etOri gin , [ transfer ]);
otherWindow:其他页面的引用，例如，iframe的contentWindow属性，或者执行window.o PE n返回的窗口对象。
message:将要传递到另一个页面的数据（可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化， 原因 是因为采用了结构化克隆算法）。
targetOrigin:通过窗口的origin属性来指定 哪些 窗口能接收到消息事件,其值可以是一个字符串"*"（表示无限制）或者一个Url。只有当目标窗口的协议、主机地址、端口号和targetOrigin完全匹配时，目标窗口才会收到message信息。为了 防 止信息 泄露 ，通常情况下都会指定特定的url。
transfer：可选参数。
使用方法：
1.父页面：(url为http://www.b .COM /m ai n.ht ML )：
<!DOCTYPE html>
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<t IT le>父页面</title>
</head>
<body>
<iframe id="child" src="http://www.a.com/iframepage.html"></iframe>
<script>
window.onload = function(){
document.getElementById("child").contentWindow.postMessage("主页面传递的消息","http://www.a.com/iframepage.html")
}
window.addEventListener('message', function(event){ //父获取子传递的消息
if(event.origin == "http://www.a.com"){
//可以在这里做一些逻辑操作
}
}, false)
</script>
</body>
</html>
2.子页面(url为http://www.a.com/iframepage.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
<div>这里是子页面</div>
<script>
window.addEventListener('message', function(event){
if(event.origin == "http://www.b.com"){
//可以在这里做一些操作
top.postMessage("子页面收到父页面传递来的消息", 'http://www.b.com/main.html')//子页面向父页面传递消息
}
}, false);
</script>
</body>
</html>
postMessage方法被调用时，会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息，该MessageEvent消息有四个属性需要注意：
type：表示该message的类型
data：为postMessage的第一个参数
origin：表示调用postMessage方法窗口的源
source：记录调用postMessage方法的窗口对象
特别注意：
1.一定要等A页面嵌入的B页面加载完成之后，再进行postMessage跨域通信
2.一定要对origin做判断，去掉不是来自我们目标窗口的origin，防止来自其他origin的攻击
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 使用iframe+postMessage实现页面跨域通信的示例代码 全部内容，希望文章能够帮你解决 使用iframe+postMessage实现页面跨域通信的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于使用iframe+postMessage实现页面跨域通信的示例代码的详细内容...