主页面与不同域名的iframe之间通信
window.postMessage()
The
window.postMessage()method safely enables cross-origin communication betweenWindowobjects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
window.postMessage()方法安全地启用Window对象之间的跨源通信; 例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。
通常，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“ 同源策略 ”）时，允许不同页面上的脚本相互访问。window.postMessage()提供一种受控制的机制来安全地规避这种限制（如果使用得当）。
现在我们用个小小demo来体验一下，父页面引入iframe(不同域名,下面的iframe大家也都可以引用测试)，
先发送消息到iframe，iframe接收到后在页面上显示该消息并返回#ccc色值改变父页面body背景颜色。iframe页面上有个颜色选择器，更改不同颜色值，则发送该色值到父页面，父页面接收色值后更改body的背景色。
<body>
这是主页面
<iframe width="100%" height="500" src="http://wangkaiwen.cn/ceshi/" frameborder="0" style="border:1px solid #ccc"></iframe>
</body>
<script>
window.onload = function () {
window.frames[0].postMessage('要获取颜色啦', '*');
};
window.addEventListener('message', function (e) {
document.body.style.backgroundColor = e.data;
}, false);
</script>
<body>
<p>这是子页面</p>
<input type="color" onchange="changeColor(event,this)">
<div id="messageBox"></div>
</body>
<script type="text/javascript">
var messageBox = document.getElementById('messageBox');
window.addEventListener('message', function (e) {
if (e.source != window.parent) return;
messageBox.innerHTML='收到消息:'+e.data+(new Date());
window.parent.postMessage('#ccc', '*');
}, false);
function changeColor(e,self) {
window.parent.postMessage(self.value, '*');
}
</script>
不仅仅是iframe可以用这种方法,window.open打开的页面同样适用，只不过新打开的页面用window.opener就可以获取到原页面。
网友评论