申明
window.postMessage()要领能够平安地完成Window对象之间的跨域通讯。比方,在一个页面和它天生的弹出窗口之间,或者是页面和嵌入个中的iframe之间。
通常情况下,差别页面上的剧本许可相互接见,当且仅当它们源自的页面同享雷同的协定,端口号和主机(也称为“同源战略”)。window.postMessage()供应了一个受控的机制来平安地躲避这个限定(假如运用妥当的话)。
一般来说,一个窗口能够获得对另一个窗口的援用(比方,经由过程targetWindow=window.opener),然后运用targetWindow.postMessage()在其上派发MessageEvent。吸收窗口随后可根据须要自行处理此事宜。通报给window.postMessage()的参数经由过程事宜对象暴露给吸收窗口。
发送端
postMessage顺序
var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
receiver.postMessage("Hello "+val+"!", "http://res.42du.cn");
});
发送音讯的基础语法:
targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow
targetWindow就是吸收音讯的窗口的援用。 获得该援用的要领包含:
- Window.open
- Window.opener
- HTMLIFrameElement.contentWindow
- Window.parent
- Window.frames +索引值
message
message就是要发送到目的窗口的音讯。 数据运用结构化克隆算法举行序列化。 这意味着我们能够将林林总总的数据对象平安地通报到目的窗口,而无需本身对其举行序列化。
targetOrigin
targetOrigin就是指定目的窗口的泉源,必需与音讯发送目的相一致,能够是字符串“”或URI。 示意任何目的窗口都可吸收,为平安起见,请一定要明白提定吸收方的URI。
transfer
transfer是可选参数
吸收端
目的窗口经由过程实行下面的JavaScript来侦听发送过来的音讯:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
if (event.origin !== "http://www.42du.cn")
return;
}
event对象有三个属性,分别是origin,data和source。event.data示意吸收到的音讯;event.origin示意postMessage的发送泉源,包含协定,域名和端口;event.source示意发送音讯的窗口对象的援用; 我们能够用这个援用来竖立两个差别泉源的窗口之间的双向通讯。
完全顺序
发送顺序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>42度空间-window.postMessage()跨域音讯通报</title>
</head>
<body>
<div>
<input id="text" type="text" value="42度空间" />
<button id="send" >发送音讯</button>
</div>
<iframe id="receiver" src="http://res.42du.cn/static/html/receiver.html" width="500" height="60">
<p>你的浏览器不支持IFrame。</p>
</iframe>
<script>
window.onload = function() {
var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
receiver.postMessage("Hello "+val+"!", "http://res.42du.cn");
});
}
</script>
</body>
</html>
吸收顺序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>42度空间-从www.42du.cn吸收音讯</title>
</head>
<body>
<div id="message">
Hello World!
</div>
<script>
window.onload = function() {
var messageEle = document.getElementById('message');
window.addEventListener('message', function (e) {
alert(e.origin);
if (e.origin !== "http://www.42du.cn") {
return;
}
messageEle.innerHTML = "从"+ e.origin +"收到音讯: " + e.data;
});
}
</script>
</body>
</html>
演示地点
[跨域音讯通报](http://www.42du.cn/paper/11)