概述:
postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
语法:
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow:其他窗口的引用,如 iframe的contentWindow、执行window.open返回的窗口对象、或者是命名过或数值索引 的window.frames
message:将要发送到其他window的数据,以为json格式(因为我比较喜欢json格式的)部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化
targetOrigin:指定那些窗口能接收到消息事件,其值可以是字符串 “*” 表示无限制,或者是一个URI
transfer:是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送方将不再保留所有权
postMessage方法被调用时,会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息,
MessageEvent消息有四个需要注意的属性:
type:表示该message的类型
data:为 postMessage 的第一个参数
origin:表示调用postMessage方法窗口的源
source:记录调用postMessage方法的窗口对象
代码实例:
iframe_send_msg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage 跨域通信 主页面</title>
</head>
<body>
<h1>主页面</h1>
<iframe id="child" src="http://192.168.1.10/php_demo/iframe_page.html"></iframe>
<div>
<h2>主页面接收消息区域</h2>
<span id="message"></span>
</div>
</body>
<script>
window.onload = function(){
document.getElementById('child')
.contentWindow.postMessage("主页面消息",
"http://192.168.1.10/php_demo/iframe_page.html")
}
window.addEventListener('message', function(event){
document.getElementById('message').innerHTML = "收到"
+ event.origin + "消息:" + event.data;
}, false);
</script>
</html>
子页面代码,iframe_page.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://127.0.0.1/php_demo/iframe_send_msg.html')
}, false);
</script>
</html>
运行效果图: