web跨域通信方法总结

出于安全的原因,浏览器对跨域通信上做了一些限制,这是理所当然的,否则就可以就会出现各种获取用户私密数据的问题。
但在实际开发中,我也会有跨域通信的需求,跨域要求不同域名之间做配合,单方面可是做不了的。

1,通过间隔时间来不断获取hash值。

//占位编辑

2,JSONP

//占位编辑

3,借助于FLASH

//占位编辑

4,用HTML5的API

HTML5提供了一个可以让我们跨域通信的API:postMessage,我们先看一下浏览器对这个API的支持情况。
Internet Explorer 8.0+, Chrome 2.0+Firefox 3.0+, Opera 9.6+, Safari 4.0+

基本用法:
接收其他页面发送过来的消息,要给window绑定事件。

//接收
window.addEventListener('message', function(e){
     console.log(e.origin);  //可以获取发过来的消息源,通常是一个url
      console.log(e.data);    //可以获取发过来的内容 
     console.log(e.source);   //可以获取到消息发送源的窗口对象
}, false);

用了addEventListener绑定事件,为什么最后一个参数是false?因为通信事件没有冒泡。
出于安全,建议用e.origin检查消息来源是否为可信任方,防止其他源恶意发送内容。
 

向其他页面发送消息:

//iframeObj.postMessage(messageContent, url);
iframeObj.postMessage('这是我给你发送的内容', 'http://www.test.com');

值得一提的是message不限于字符串,也可以是对象,数组。但IE8/IE9/FireFox3.6及其以下版本只支持字符串数据。 
第二个参数是要发送到目标页的地址,注间后面不要带上斜杠。

 5,window.name

原文地址:https://www.cnblogs.com/zzbo/p/2657576.html