postMessage实现跨域、跨窗口新闻通报-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来postMessage实现跨域、跨窗口新闻通报，postMessage实现跨域、跨窗口新闻通报的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来postMessage实现跨域、跨窗口新闻通报，postMessage实现跨域、跨窗口新闻通报的注意事项是什么，下面就是实战案例，一起来看一下。

平时做web开发的时候对于新闻通报，除了客户端与办事器传值还有几个时常会碰到的题目

1.页面和其打开的新窗口的数据通报

2.多窗口之间新闻通报

3.页面与嵌套的iframe新闻通报

4.上面三个题目的跨域数据通报

postMessage()

这些题目都有一些解决方法，但html5引入的message的API可以更利便、有效、平安的解决这些难题。postMessage()办法允许来自不一样源的足本采纳异步方式进行有限的通讯，可以实现跨文本档、多窗口、跨域新闻通报。

postMessage(data,origin)办法承受两个参数

1.data:要通报的数据，html5标准中提到该参数可以是JavaScript的任意根本类型或可复制的对象，然而并不是所有阅读器都做到了这点儿，局部阅读器只能处置字符串参数，所以我们在通报参数的时候需要运用JSON.stringify()办法对对象参数序列化，在低版本IE中援用json2.js可以实现相似结果。

2.origin：字符串参数，指明指标窗口的源，协定+主机+端标语[+URL]，URL会被忽略，所以可以不写，这个参数是为了平安考虑，postMessage()办法只会将message通报给指定窗口，固然要是情愿也可以建参数设定为"*"，这样可以通报给任意窗口，要是要指定和目前窗口同源的话设定为"/"。

http://test.com/index.html

Frame Color

我们可以在http://test.com/index.html通过postMessage()办法向跨域的iframe页面http://lsLib.com/lsLib.html通报新闻

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

接收新闻

test.com上面的页面向lslib.com发送了新闻，那么在lslib.com页面上怎样接收新闻呢，监听window的message事件就可以

http://lslib.com/lslib.html

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

这样我们就可以接收任何窗口通报来的新闻了，为了平安起见，我们应用这时候的MessageEvent对象推断了一下新闻源,MessageEvent是一个这样的东东

Post Message

Frame Color

打赏