otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow:其他窗口的引用,如 iframe的contentWindow、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message:将要发送到其他window的数据。
targetOrigin:指定那些窗口能接收到消息事件,其值可以是字符串 “*” 表示无限制,或者是一个URI。
transfer:是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送方将不再保留所有权。
postMessage方法被调用时,会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息,该MessageEvent消息有四个属性需要注意:
type:表示该message的类型
data:为 postMessage 的第一个参数
origin:表示调用postMessage方法窗口的源
source:记录调用postMessage方法的窗口对象
一定是页面加载完成后在发送消息,否则会因为iframe未加载完成报错。Failed to execute ‘postMessage’ on ‘DOMWindow’
http://a.com/main.html 主页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe+postMessage 跨域通信 主页面</title> </head> <body> <h2>主页面</h2> <iframe id="child" src="http://b.com/iframepage.html"></iframe> <div> <h2>主页面接收消息区域</h2> <span id="message"></span> </div> </body> <script> window.onload = function(){ document.getElementById('child') .contentWindow.postMessage("主页面消息", "http://b.com/iframepage.html") } window.addEventListener('message', function(event){ document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data; }, false); </script> </html>
http://b.com/iframepage.html 嵌套页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe+postMessage跨域通信 子页面</title> </head> <body> <h2>子页面</h2> <div> <h3>接收消息区域</h3> <span id="message"></span> </div> </body> <script> window.addEventListener('message',function(event){ if(window.parent !== event.source){return} console.log(event); document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data; top.postMessage("子页面消息收到", 'http://a.com/main.html') }, false); </script> </html>