html5 postMessage解决跨域、跨窗口消息传递方案

window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);

 主页面接收消息，更改自己div颜色

window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);

 当点击iframe事触发其变色方法，把最新颜色发送给主页面

function changeColor () {
var color=container.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
container.style.backgroundColor=color;
window.parent.postMessage(color,'*');
}

主页面还是利用刚才监听message事件的程序处理自身变色

window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);

最后

很简单的用法却解决了大问题，据说Facebook已经在使用了，而且这也是html5另一个API——web workers传递消息的方法，那么它的浏览器兼容性怎么样呢？所谓浏览器兼容性几乎变成了IE几开始支持的问题了。。。不过好消息是跟localStorage一样，IE8+都支持了，只不过有些浏览器的低版本（比如FireFox4.0）并不支持window.onmessage=function(){}这种写法，所以我么最好使用事件绑定的写法，为了兼容IE，也要判断是否支持addEventListener。