這里說的js跨域是指通過js在不同的域之間進行數據傳輸或通信，比如用ajax向一個不同的域請求數據，或者通過js獲取頁面中不同域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不同，都被當作是不同的域。
關于跨域大概可以分為 iframe 的跨域和純粹的跨全域請求。
先介紹跨全域的方法
1.JSONP
在js中，我們直接用XMLHttpRequest請求不同域上的數據時，是不可以的。但是，在頁面上引入不同域上的js腳本文件卻是可以的，jsonp正是利用這個特性來實現的。
舉例：我希望用file協議的html 來獲取http://zhihu2.com:8080/jsonp（模擬后臺）這個接口的數據
這是html文件
html的功能很簡單，定義了一個renderPage函數，通過src 訪問接口，其中有個callback參數，值為renderPage，通過這種方式來訪問了這個借口
假定服務端頁面配合的情況。
這是我模擬后臺文件
返回的數據是 “readerPage([數據...])”這種形式。由于在html中定義了這個函數，通過script返回的字符串會被當作Javascript來解析，所以執行函數readerPage();并把返回的數據當作參數執行。
得到的結果
這樣jsonp的原理就很清楚了，通過script標簽引入一個js文件，這個js文件載入成功后會執行我們在url參數中指定的函數，并且會把我們需要的json數據作為參數傳入。所以jsonp是需要服務器端的頁面進行相應的配合的.
2.CORS
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發出XMLHttpRequest
請求，從而克服了AJAX只能同源使用的限制。
CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。
重點：服務器實現CORS接口
舉例：
html文件
后臺文件
重點是實現CORS接口，設置header，如圖。*表示所有，也可以單獨設特定的url。
參考http://www.ruanyifeng.com/blog/2016/04/cors.html
這里只介紹簡單情況。
CORS與JSONP的使用目的相同，但是比JSONP更強大。
JSONP只支持GET請求，CORS支持所有類型的HTTP請求。JSONP的優勢在于支持老式瀏覽器，以及可以向不支持CORS的網站請求數據。
介紹iframe的跨域請求
1.通過修改document.domain來跨子域
瀏覽器都有一個同源策略，其限制之一就是第一種方法中我們說的不能通過ajax的方法去請求不同源中的文檔。 它的第二個限制是瀏覽器中不同域的框架之間是不能進行js的交互操作的。有一點需要說明，不同的框架之間（父子或同輩），是能夠獲取到彼此的window對象的，但蛋疼的是你卻不能使用獲取到的window對象的屬性和方法(html5中的postMessage方法是一個例外，還有些瀏覽器比如ie6也可以使用top、parent等少數幾個屬性)，總之，你可以當做是只能獲取到一個幾乎無用的window對象。比如，有一個頁面，它的地址是http://www.example.com/a.html ， 在這個頁面里面有一個iframe，它的src是http://example.com/b.html, 很顯然，這個頁面與它里面的iframe框架是不同域的，所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的：
這個時候，document.domain就可以派上用場了，我們只要把http://www.example.com/a.html 和 http://example.com/b.html這兩個頁面的document.domain都設成相同的域名就可以了。但要注意的是，document.domain的設置是有限制的，我們只能把document.domain設置成自身或更高一級的父域，且主域必須相同。例如：a.b.example.com 中某個文檔的document.domain 可以設成a.b.example.com、b.example.com 、example.com中的任意一個，但是不可以設成 c.a.b.example.com,因為這是當前域的子域，也不可以設成baidu.com,因為主域已經不相同了。
2.postMessage
window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。
調用postMessage方法的window對象是指要接收消息的那一個window對象，該方法的第一個參數message為要發送的消息，類型只能為字符串；第二個參數targetOrigin用來限定接收消息的那個window對象所在的域，如果不想限定域，可以使用通配符 * 。
需要接收消息的window對象，可是通過監聽自身的message事件來獲取傳過來的消息，消息內容儲存在該事件對象的data屬性中。
上面所說的向其他window對象發送消息，其實就是指一個頁面有幾個框架的那種情況，因為每一個框架都有一個window對象。在討論第二種方法的時候，我們說過，不同域的框架間是可以獲取到對方的window對象的，而且也可以使用window.postMessage這個方法。下面看一個簡單的示例，有兩個頁面
