5postMessage
这是由H5提出来的一个炫酷的API,IE8+,chrome,ff都已经支持实现了这个功能。这个功能也是非常的简单,其中包括接受信息的Message时间,和发送信息的postMessage方法。 发送信息的postMessage方法是向外界窗口发送信息
js
otherWindow.postMessage(message,targetOrigin);otherWindow指的是目标窗口,也就是要给哪一个window发送消息,是window.frames属性的成员或者是window.open方法创建的窗口。 Message是要发送的消息,类型为String,Object(IE8、9不支持Obj),targetOrigin是限定消息接受范围,不限制就用星号 *
接受信息的message事件:
js
var onmessage = function(event) {
var data = event.data
var origin = event.origin
}
window.addEventListener('message', onmessage, false)例子 a.html(http://www.nealyang.cn/a.html)
html
<iframe id="iframe" src="http://www.neal.cn/b.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe');
iframe.onload = function() {
var data = {
name: 'aym'
};
// 向neal传送跨域数据
iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.neal.cn');
};
// 接受domain2返回数据
window.addEventListener('message', function(e) {
alert('data from neal ---> ' + e.data);
}, false);
</script>b.html(http://www.neal.cn/b.html)
html
<script>
// 接收domain1的数据
window.addEventListener('message', function(e) {
alert('data from nealyang ---> ' + e.data);
var data = JSON.parse(e.data);
if (data) {
data.number = 16;
// 处理后再发回nealyang
window.parent.postMessage(JSON.stringify(data), 'http://www.nealyang.cn');
}
}, false);
</script>