H5中如何运用postMessage实现两个网页间通报数据-
预计很少人晓得HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。根本上，它就像是跨域的AJAX，但不是阅读器跟办事器之间交互，而是在两个客户端之间通讯。让我们来看一下window.postMessage是怎样工作的。除了IE6、IE7以外的所有阅读器都支撑这个功能。
数据发送端
第一我们要做的是新建通讯发起端，也就是数据源”source”。作为发起端，我们可以open一个新窗口，或新建一个iframe，往新窗口里发送数据，简略起见，我们每6秒钟发送一次，然后新建新闻监听器，从指标窗口监听它反应的信息。
//弹出一个新窗口
var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain
+ '/windowPostMessageListener.html','myWindow');
//周期性的发送新闻
setInterval(function(){
var message = 'Hello! The time is: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
//send the message and target URI
myPopup.postMessage(message,domain);
},6000);
//监听新闻反应
window.addEventListener('message',function(event) {
if(event.origin !== 'http://scriptandstyle.com') return;
console.log('received response: ',event.data);
},false);这里我运用了window.addEventListener，但在IE里这样是不过关的，由于IE运用window.attachEvent。要是你不想推断阅读器的类型，可以运用一些工具库，比方jQuery或Dojo。
假如你的窗口正常的弹出来了，我们发送一条新闻——需要指定URI(须要的话需要指定协定、主机、端标语等)，新闻接收方必需在这个指定的URI上。要是指标窗口被替代了，新闻将不会发出。
我们同时新建了一个事件监听器来接收反应信息。有一点极其重要，你一定要验证新闻的来源的URI！只要在指标方合法的状况才你才干处置它发来的新闻。
要是是运用iframe，代码应当这样写：
//捕捉iframe
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;
//发送新闻
setInterval(function(){
var message = 'Hello! The time is: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
//send the message and target URI
iframe.postMessage(message,domain);
},6000);确保你运用的是iframe的contentWindow属性，而不是节点对象。
数据接收端
下面我们要开发的是数据接收端的页面。接收方窗口里有一个事件监听器，监听“message”事件，同样，你也需要验证新闻来源方的地址。新闻可以来自任何地址，要确保处置的新闻是来自一个可信的地址。
//相应事件
window.addEventListener('message',function(event) {
if(event.origin !== 'http://davidwalsh.name') return;
console.log('message received: ' + event.data,event);
event.source.postMessage('holla back youngin!',event.origin);
},false);上面的代码片段是往新闻源反应信息，确认新闻已经收到。下面是几个比拼重要的事件属性：
source – 新闻源，新闻的发送窗口/iframe。
origin – 新闻源的URI(可能包括协定、域名和端口)，用来验证数据源。
data – 发送方发送给接收方的数据。
这三个属性是新闻传输中必需用到的数据。
运用window.postMessage
跟其他很web技术同样，要是你不校验数据源的合法性，那运用这种技术将会变得很惊险；你的利用的平安需要你对它负责。window.postMessage就像是PHP相关于JavaScript技术。window.postMessage很酷，不是吗？
信赖看了这些案例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！
相干浏览：
vue.js做出图书治理平台的细致步骤
bootstrap里怎样统计table sum的数目
如何用JS做出按钮禁用和启用
以上就是H5中如何运用postMessage实现两个网页间通报数据的细致内容，更多请关注 百分百源码网 其它相干文章！
