H5里的postMessage API图文详解详细介绍-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

关于postMessage，虽然说是html5的功能但是支持IE8+，假如你的网站不需要支持IE6和IE7，那么可以使用window.postMessage。既可以跨域传递，也可以同域传递。

我只是简单的举一个应用场景，当然，这个功能很多地方可以使用。

假如你有一个页面，页面中拿到部分用户信息，点击进入另外一个页面，另外的页面默认是取不到用户信息的，你可以通过window.postMessage把部分用户信息传到这个页面中。（当然，你要考虑安全性等方面。）

代码举例

发送信息：

JavaScript Code复制内容到剪贴板

//弹出一个新窗口   
var domain = 'https://haorooms.com';   
var myPopup = window.open(domain    
            + '/windowPostMessageListener.html','myWindow');   
   
//周期性的发送消息   
setTimeout(function(){   
    //var message = '当前时间是 ' + (new Date().getTime());    
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等   
    console.log('传递的数据是  ' + message);   
    myPopup.postMessage(message,domain);   
},1000);

要延迟一下，我们一般用计时器setTimeout延迟再发用。

接受的页面

JavaScript Code复制内容到剪贴板

//监听消息反馈

window.addEventListener('message',function(event) {   
    if(event.origin !== 'https://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的   
    console.log('received response:  ',event.data);   
},false);

如下图，接受页面得到数据

如果是使用iframe，代码应该这样写：

JavaScript Code复制内容到剪贴板

//捕获iframe   
var domain = 'https://haorooms.com';   
var iframe = document.getElementById('myIFrame').contentWindow;   
   
//发送消息   
setTimeout(function(){   
    //var message = '当前时间是 ' + (new Date().getTime());    
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等   
    console.log('传递的数据是:  ' + message);   
        //send the message and target URI   
    iframe.postMessage(message,domain);    
},1000);

接受数据

JavaScript Code复制内容到剪贴板

//响应事件   
window.addEventListener('message',function(event) {   
    if(event.origin !== 'https://haorooms.com') return;   
    console.log('message received:  ' + event.data,event);   
    event.source.postMessage('holla back youngin!',event.origin);   
},false);