跨域通信的解决方案

跨域是前端开发中经常会碰到的问题，它的解决方案也有很多种。在这里做一个总结。（本文大多数的内容来源于网络）。

• 什么是跨域
• document.domain + iframe
• 动态创建 script 标签
• 利用 iframe 和 location.hash
• window.name 实现跨域数据传输
• 使用 HTML5 的 postMessage

1. 什么是跨域

先说同域吧，能够同时满足以下条件的都是同域。域名(so.com)相同，子域(image.so.com)相同，端口(:8080)相同，网络协议(http、https)。其他的情况都是跨域。

JavaScript 处于安全方面的考虑，不允许跨域调用其他页面的对象。但是在安全限制的同时也给注入的 Iframe 或者 ajax 应用带来了不少的麻烦。

下面是一些跨域的解决方案

2. document.domain + iframe

对于主域相同而子域不同的情况下，可以通过设置document.domain的办法来解决。具体的做法是可以在 http://www.a.com/a.html 和 http://script.a.com/b.html 两个文件中分别加上 document.domain = "a.com"；然后通过 a.html 文件中创建一个 iframe，去控制 iframe 的 contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把 script.a.com 的 domian 设为 alibaba.com 那显然是会报错地！代码如下：

www.a.com 上的 a.html

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

script.a.com 上的 b.html

document.domain = 'a.com';

这种方式适用于{www.a.com, a.com, b.a.com, c.a.com}中的任何页面相互通信。

某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如www.a.com其实是二级域名。 domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。

3. 动态创建 script 标签

虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。

这里判断script节点加载完毕还是蛮有意思的：ie只能通过script的readystatechange属性，其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。

js.onload = js.onreadystatechange = function() {
   
    if (!this.readyState