發(fā)現(xiàn)什么了嗎？響應(yīng)內(nèi)容callback("我今天要用jsonp來(lái)跨域獲取數(shù)據(jù)")會(huì)被當(dāng)作js代碼來(lái)執(zhí)行，正好調(diào)用了我們之前定義的callback函數(shù)。
由此，我們成功的利用jsonp通過(guò)跨域獲取到了想要的數(shù)據(jù)。

開頭我們說(shuō)到不同源的框架之間是不能進(jìn)行js交互操作的，其實(shí)是可以獲取window對(duì)象，但不能獲取window的屬性。
原理：

document.domain的值是可以設(shè)置的，但僅限于設(shè)置為自身或是更高一級(jí)的父級(jí)域名（主域名相同）。

那么主域名相同，子域名不同的框架之間跨域獲取數(shù)據(jù)的思路就來(lái)了，我們把它們的document.domain都設(shè)置成主域名不就完事了？
比如有一個(gè)頁(yè)面a.google.com/1.html
這里參考了其他文章的代碼。出處見(jiàn)本文最下方

另一個(gè)頁(yè)面b.google.com/2.html只需設(shè)置主域名為google.com，兩個(gè)框架間就可以進(jìn)行交互啦。

原理：

hash字段（經(jīng)常用于錨點(diǎn)定位）不屬于http協(xié)議的部分，請(qǐng)求不會(huì)攜帶hash信息，所以改變不會(huì)重新請(qǐng)求資源（但是會(huì)產(chǎn)生新的瀏覽器歷史記錄，許多前端路由也是借用這個(gè)原理實(shí)現(xiàn)的）

父窗口可以對(duì)iframe進(jìn)行URL讀寫，iframe也可以讀寫父窗口的URL（不同源的話，IE、Chrome不允許修改parent.location.hash的值，但我們?nèi)杂刑幚矸绞剑?/p>

思路：

如果是父窗口向子窗口跨域傳遞數(shù)據(jù)，直接修改子窗口url的hash就可以了，比較簡(jiǎn)單這里就不貼代碼了。

子窗口向父親窗口跨域傳遞數(shù)據(jù)就需要多加一個(gè)代理窗口（因?yàn)镮E,Chrome），這個(gè)代理窗口和父親窗口同源就可以了，在這個(gè)代理窗口改變父親窗口的hash,父親窗口監(jiān)聽hashchange就可以了。

代碼如下：
父親窗口頁(yè)面
http://localhost:63342/test-field/cross-origin/local-test/hash-parent.html

子窗口頁(yè)面
http://blank121.github.io/tes...

try{
  parent.location.hash="今天我要用hash跨域"
  //chrome ie 直接修改parent.location.hash報(bào)錯(cuò)
}catch (e){
  var iframe = document.createElement("iframe")
  iframe.src = "https://localhost:63342/test-field/cross-origin/local-test/hash-proxy.html"+"#今天我要用hash跨域"
  document.body.appendChild(iframe);
}

代理窗口頁(yè)面
http://localhost:63342/test-field/cross-origin/local-test/hash-proxy.html

如上，在子窗口頁(yè)面內(nèi)修改了代理窗口的hash值，代理窗口又修改了父親窗口的hash值，父親窗口監(jiān)聽hashchange就可以獲取到不同源的子窗口傳來(lái)的數(shù)據(jù)啦。
控制臺(tái)結(jié)果如下：

原理：

window對(duì)象有個(gè)name屬性，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的，每個(gè)頁(yè)面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的，并不會(huì)因新頁(yè)面的載入而進(jìn)行重置。

利用一個(gè)窗口的生命周期內(nèi)，載入不同頁(yè)面window.name不變的特性
貼代碼前首先去做個(gè)有趣的實(shí)驗(yàn)
在必應(yīng)的首頁(yè)設(shè)置一下window.name

然后輸入location.href = "http://www.baidu.com"，跳轉(zhuǎn)到百度后再看一下name

666,window.name果然沒(méi)騙我，沒(méi)有變化。

接下來(lái)先貼代碼
父親窗口：
http://localhost:63342/test-field/cross-origin/local-test/name-parent.html

子窗口：
https://blank121.github.io/te...

代理窗口(啥也沒(méi)做。主要是要和父親窗口同源來(lái)傳遞name)

代碼如上，主要思路就是利用window.name不變性，子窗口設(shè)置了name之后，來(lái)加載一個(gè)和父親窗口同源的代理窗口，以此來(lái)獲取name(注意子窗口和代理窗口是同一個(gè)iframe，加載不同頁(yè)面而已，所以window.name不變)

首先了解一下postMessage
otherWindow.postMessage(message, targetOrigin);
otherWindow:指目標(biāo)窗口，也就是給哪個(gè)window發(fā)消息，是 window.frames 屬性的成員或者由 window.open 方法創(chuàng)建的窗口
message: 是要發(fā)送的消息，類型為 String、Object (IE8、9 不支持)
targetOrigin: 是限定消息接收范圍，不限制請(qǐng)使用 *

postMessage是HTML5新特性，跨域簡(jiǎn)直太方便了，就是兼容性要注意一下。

發(fā)送方頁(yè)面

接收方頁(yè)面

接收方監(jiān)聽一下message事件，就可以接收到信息啦。

WebSocket 是一種在客戶端與服務(wù)器之間保持TCP長(zhǎng)連接的網(wǎng)絡(luò)協(xié)議，這樣它們就可以隨時(shí)進(jìn)行信息交換（雙工通訊）。
雖然任何客戶端或服務(wù)器上的應(yīng)用都可以使用WebSocket，但原則上還是指瀏覽器與服務(wù)器之間使用。通過(guò)WebSocket，服務(wù)器可以直接向客戶端發(fā)送數(shù)據(jù)，而無(wú)須客戶端周期性的請(qǐng)求服務(wù)器，以動(dòng)態(tài)更新數(shù)據(jù)內(nèi)容。

WebSocket 非常強(qiáng)大，筆者在這方面也是小白級(jí)別的，以后有時(shí)間會(huì)詳細(xì)研究學(xué)習(xí)。

跨域代碼如下
頁(yè)面:

服務(wù)端nodeJs代碼：

var WebSocketServer = require("ws").Server;
var wss = new WebSocketServer({ port: 8080 });

wss.on("connection", function connection(ws) {
  ws.on("message", function incoming(message) {
    console.log("received: %s", message);
     ws.send("hello"+message);
  });
});

結(jié)果如圖：
瀏覽器端：

服務(wù)端：

完美實(shí)現(xiàn)了跨域。

老生常談的CORS,優(yōu)秀的文章已經(jīng)非常多了，大家可以搜一下，非常重要，有機(jī)會(huì)我會(huì)專門寫一篇文章來(lái)學(xué)習(xí)總結(jié)，在此就不再詳述了

不得不說(shuō)，這些方法還是比較巧妙的，在此寫下一篇文章來(lái)總結(jié)一下，感覺(jué)自己面對(duì)跨域絲毫不慌啦。

前端跨域整理
正確面對(duì)跨域，別慌
瀏覽器的同源策略