[TOC]

什么是跨域？

理解跨域，可以先了解下同源策略。
当协议、域名、端口号其中任一个不同时，都算作不同域。不同域之间相互资源请求就是“跨域”。
同源策略是浏览器需遵循的标准，服务器端向服务器请求无需遵循。

解决方案

1、iframe + document.domain

如果两个窗口以及域名相同，只是二级域名不通，如 http://a.test.com 和 http://b.test.com ,可以通过设置 document.cookie=”test.com”实现跨域。

注意：使用 document.domain 来允许子域安全访问其父域时，您需要在父域和子域中设置 document.domain 为相同的值。这是必要的，即使这样做只是将父域设置回其原始值。不这样做可能会导致权限错误。

2、iframe + location.hash

hash指的是URL的 # 号后面的部分，如http://example.com/x.html#fragment的 #fragment。如果只改变hash，页面不会重新刷新。

父窗口把信息写入子窗口的hash：

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src

子窗口通过监听 hashchange 事件得到通知：

window.onhashchange = function(){
    var message = window.location.hash;
  // ...
}

同样，子窗口也可改变父窗口的hash:

parent.location.href = target + '#' + hash;

3、iframe + window.name

window.name 无论是否同源，只要在同一个窗口中，前一个网页设置了这个属性，后一个网页就可以读取它。大小限制约为2M，不同浏览器会有不同约定。

4、window.postMessage

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

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。
targetOrigin通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串”“（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。**如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
`_transfer**_可选是一串和message 同时传递的 [Transferable`](https://developer.mozilla.org/zh-CN/docs/Web/API/Transferable) 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

执行如下代码, 其他window可以监听派遣的message:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object. 
  // 这里不准确，chrome没有这个属性
  // var origin = event.origin || event.originalEvent.origin; 
  var origin = event.origin
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

data从其他 window 中传递过来的对象。
origin调用 postMessage 时消息发送方窗口的 origin . 这个字符串由协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。
source对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

子窗口通过event.source属性引用父窗口，然后发送消息:

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  event.source.postMessage('Nice to see you!', '*');
}

5、jsonp

利用

前端知识体系