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

时间：2017-04-08

在例子中页面加载的时候主页面向iframe发送’getColor‘ 请求（参数没实际用处）

window.onload=function(){
            window.frames[0].postMessage('getcolor','http://lslib.com');
        }

iframe接收消息，并把当前颜色发送给主页面呢

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。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

共2页:

2/2下一篇

上一篇：基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码 下一篇：详解HTML5中表单验证的8种方法介绍

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

相关文章

最新文章