全面分析前端的网络请求方式(8)

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

//捕获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);  

//响应事件  
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);  

postMessage跨域适用于以下场景：同浏览器多窗口间跨域通信、iframe间跨域通信。

WebSocket

WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据而不受同源策略的限制。       

function WebSocketTest(){  
            if ("WebSocket" in window){  
               alert("您的浏览器支持 WebSocket!");  
               // 打开一个 web socket  
               var ws = new WebSocket("ws://localhost:3000/abcd");  
               ws.onopen = function(){  
                  // Web Socket 已连接上，使用 send() 方法发送数据  
                  ws.send("发送数据");  
                  alert("数据发送中...");  
               };  
               ws.onmessage = function (evt) {   
                  var received_msg = evt.data;  
                  alert("数据已接收...");  
               };  
               ws.onclose = function(){   
                  // 关闭 websocket  
                  alert("连接已关闭...");   
               };  
            } else{  
               // 浏览器不支持 WebSocket  
               alert("您的浏览器不支持 WebSocket!");  
            }  
         }  

文中如有错误，欢迎在评论区指正，谢谢阅读。

（编辑：ASP站长网）