web前端學(xué)習(xí)交流群：1141251437<br>需要學(xué)習(xí)web前端的小伙伴本冲，加群准脂，一起交流，一起學(xué)習(xí)檬洞，可免費(fèi)領(lǐng)取學(xué)習(xí)資料及源碼

面向JavaScript愛好人員提供：Web前端最新資訊添怔、原創(chuàng)內(nèi)容湾戳、JavaScript、HTML5广料、Ajax砾脑、jQuery、Node.js艾杏、Vue.js韧衣、React、Angular等一系列教程和經(jīng)驗(yàn)分享购桑。<br><br>博客首發(fā)：<a href="https://links.jianshu.com/go?to=http%3A%2F%2Fwww.dadaqianduan.cn%2F%23%2F" target="_blank">http://www.dadaqianduan.cn/#/</a>

前言 相信每一個(gè)前端er對(duì)于跨域這兩個(gè)字都不會(huì)陌生，在實(shí)際項(xiàng)目中應(yīng)用也是比較多的元旬。但跨域方法的多種多樣實(shí)在讓人目不暇接榴徐。老規(guī)矩守问，碰到這種情況，就只能自己總結(jié)一篇博客坑资，作為記錄耗帕。 正文 1. 什么是跨域？ 跨域一詞從字面意思看袱贮，就是跨域名嘛仿便，但實(shí)際上跨域的范圍絕對(duì)不止那么狹隘。具體概念如下：只要協(xié)議攒巍、域名嗽仪、端口有任何一個(gè)不同，都被當(dāng)作是不同的域柒莉。之所以會(huì)產(chǎn)生跨域這個(gè)問題呢闻坚，其實(shí)也很容易想明白，要是隨便引用外部文件兢孝，不同標(biāo)簽下的頁面引用類似的彼此的文件窿凤，瀏覽器很容易懵逼的，安全也得不到保障了就跨蟹。什么事雳殊，都是安全第一嘛。但在安全限制的同時(shí)也給注入iframe或是ajax應(yīng)用上帶來了不少麻煩窗轩。所以我們要通過一些方法使本域的js能夠操作其他域的頁面對(duì)象或者使其他域的js能操作本域的頁面對(duì)象（iframe之間）相种。下面是具體的跨域情況詳解： URL 說明 是否允許通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允許 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夾 允許 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名，不同端口 不允許 http://www.a.com/a.js https://www.a.com/b.js 同一域名品姓，不同協(xié)議 不允許 http://www.a.com/a.js http://70.32.92.74/b.js 域名和域名對(duì)應(yīng)ip 不允許 http://www.a.com/a.js http://script.a.com/b.js 主域相同，子域不同 不允許（cookie這種情況下也不允許訪問） http://www.a.com/a.js http://a.com/b.js 同一域名箫措，不同二級(jí)域名（同上） 不允許（cookie這種情況下也不允許訪問） http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 不允許 這里我們需要注意兩點(diǎn): 如果是協(xié)議和端口造成的跨域問題“前臺(tái)”是無能為力的腹备； 在跨域問題上，域僅僅是通過“URL的首部”來識(shí)別而不會(huì)去嘗試判斷相同的ip地址對(duì)應(yīng)著兩個(gè)域或兩個(gè)域是否在同一個(gè)ip上斤蔓。 (“URL的首部”指window.location.protocol +window.location.host植酥，也可以理解為“Domains, protocols and ports must match”。) 2. 通過document.domain跨域 前面說過了弦牡，瀏覽器有一個(gè)同源策略友驮，其限制之一是不能通過ajax的方法去請(qǐng)求不同源中的文檔。 第二個(gè)限制是瀏覽器中不同域的框架之間是不能進(jìn)行js的交互操作的驾锰。不同的框架之間是可以獲取window對(duì)象的卸留，但卻無法獲取相應(yīng)的屬性和方法。比如椭豫，有一個(gè)頁面耻瑟，它的地址是http://www.damonare.cn/a.html 旨指， 在這個(gè)頁面里面有一個(gè)iframe，它的src是http://damonare.cn/b.html, 很顯然喳整，這個(gè)頁面與它里面的iframe框架是不同域的谆构，所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的： <script type="text/javascript"> function test(){ var iframe = document.getElementById('?ifame'); var win = document.contentWindow;//可以獲取到iframe里的window對(duì)象，但該window對(duì)象的屬性和方法幾乎是不可用的 var doc = win.document;//這里獲取不到iframe里的document對(duì)象 var name = win.name;//這里同樣獲取不到window對(duì)象的name屬性 } </script> <iframe id = "iframe" src="http://damonare.cn/b.html" onload = "test()"></iframe> 這個(gè)時(shí)候框都，document.domain就可以派上用場了搬素，我們只要把http://www.damonare.cn/a.html和http://damonare.cn/b.html這兩個(gè)頁面的document.domain都設(shè)成相同的域名就可以了。但要注意的是魏保，document.domain的設(shè)置是有限制的熬尺，我們只能把document.domain設(shè)置成自身或更高一級(jí)的父域，且主域必須相同囱淋。 在頁面http://www.damonare.cn/a.html 中設(shè)置 document.domain: <iframe id = "iframe" src="http://damonare.cn/b.html" onload = "test()"></iframe> <script type="text/javascript"> document.domain = 'damonare.cn';//設(shè)置成主域 function test(){ alert(document.getElementById('?iframe').contentWindow);//contentWindow 可取得子窗口的 window 對(duì)象 } </script> 在頁面http://damonare.cn/b.html 中也設(shè)置document.domain: <script type="text/javascript"> document.domain = 'damonare.cn';//在iframe載入這個(gè)頁面也設(shè)置document.domain猪杭，使之與主頁面的document.domain相同 </script> 修改document.domain的方法只適用于不同子域的框架間的交互。 3. 通過location.hash跨域 因?yàn)楦复翱诳梢詫?duì)iframe進(jìn)行URL讀寫妥衣，iframe也可以讀寫父窗口的URL皂吮，URL有一部分被稱為hash，就是#號(hào)及其后面的字符税手，它一般用于瀏覽器錨點(diǎn)定位蜂筹，Server端并不關(guān)心這部分，應(yīng)該說HTTP請(qǐng)求過程中不會(huì)攜帶hash芦倒，所以這部分的修改不會(huì)產(chǎn)生HTTP請(qǐng)求艺挪，但是會(huì)產(chǎn)生瀏覽器歷史記錄。此方法的原理就是改變URL的hash部分來進(jìn)行雙向通信兵扬。每個(gè)window通過改變其他 window的location來發(fā)送消息（由于兩個(gè)頁面不在同一個(gè)域下IE麻裳、Chrome不允許修改parent.location.hash的值，所以要借助于父窗口域名下的一個(gè)代理iframe）器钟，并通過監(jiān)聽自己的URL的變化來接收消息津坑。這個(gè)方式的通信會(huì)造成一些不必要的瀏覽器歷史記錄，而且有些瀏覽器不支持onhashchange事件傲霸，需要輪詢來獲知URL的改變疆瑰，最后，這樣做也存在缺點(diǎn)昙啄，諸如數(shù)據(jù)直接暴露在了url中穆役，數(shù)據(jù)容量和類型都有限等。下面舉例說明： 假如父頁面是baidu.com/a.html,iframe嵌入的頁面為google.com/b.html（此處省略了域名等url屬性）梳凛，要實(shí)現(xiàn)此兩個(gè)頁面間的通信可以通過以下方法耿币。 a.html傳送數(shù)據(jù)到b.html a.html下修改iframe的src為google.com/b.html#paco b.html監(jiān)聽到url發(fā)生變化，觸發(fā)相應(yīng)操作 b.html傳送數(shù)據(jù)到a.html韧拒，由于兩個(gè)頁面不在同一個(gè)域下IE掰读、Chrome不允許修改parent.location.hash的值秘狞，所以要借助于父窗口域名下的一個(gè)代理iframe b.html下創(chuàng)建一個(gè)隱藏的iframe，此iframe的src是baidu.com域下的蹈集，并掛上要傳送的hash數(shù)據(jù)烁试，如src=”http://www.baidu.com/proxy.html#data” proxy.html監(jiān)聽到url發(fā)生變化，修改a.html的url（因?yàn)閍.html和proxy.html同域拢肆，所以proxy.html可修改a.html的url hash） a.html監(jiān)聽到url發(fā)生變化减响，觸發(fā)相應(yīng)操作 b.html頁面的關(guān)鍵代碼如下: try { parent.location.hash = 'data'; } catch (e) { // ie、chrome的安全機(jī)制無法修改parent.location.hash郭怪， var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = "http://www.baidu.com/proxy.html#data"; document.body.appendChild(ifrproxy); } proxy.html頁面的關(guān)鍵代碼如下 : //因?yàn)閜arent.parent（即baidu.com/a.html）和baidu.com/proxy.html屬于同一個(gè)域支示，所以可以改變其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1); 4. 通過HTML5的postMessage方法跨域 高級(jí)瀏覽器Internet Explorer 8+, chrome，F(xiàn)irefox , Opera 和 Safari 都將支持這個(gè)功能鄙才。這個(gè)功能主要包括接受信息的”message”事件和發(fā)送消息的”postMessage”方法颂鸿。比如damonare.cn域的A頁面通過iframe嵌入了一個(gè)google.com域的B頁面，可以通過以下方法實(shí)現(xiàn)A和B的通信 A頁面通過postMessage方法發(fā)送消息： window.onload = function() { var ifr = document.getElementById('ifr'); var targetOrigin = "http://www.google.com"; ifr.contentWindow.postMessage('hello world!', targetOrigin); }; 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)使用 ‘* B頁面通過message事件監(jiān)聽并接受消息: var onmessage = function (event) { var data = event.data;//消息 var origin = event.origin;//消息來源地址 var source = event.source;//源Window對(duì)象 if(origin=="http://www.baidu.com"){ console.log(data);//hello world! } }; if (typeof window.addEventListener != 'undefined') { window.addEventListener('message', onmessage, false); } else if (typeof window.attachEvent != 'undefined') { //for ie window.attachEvent('onmessage', onmessage); } 同理稳懒，也可以B頁面發(fā)送消息闲擦，然后A頁面監(jiān)聽并接受消息。 5.通過jsonp跨域 剛才說的這幾種都是雙向通信的场梆，即兩個(gè)iframe墅冷，頁面與iframe或是頁面與頁面之間的，下面說幾種單項(xiàng)跨域的（一般用來獲取數(shù)據(jù)）或油，因?yàn)橥ㄟ^script標(biāo)簽引入的js是不受同源策略的限制的寞忿。所以我們可以通過script標(biāo)簽引入一個(gè)js或者是一個(gè)其他后綴形式（如php，jsp等）的文件装哆，此文件返回一個(gè)js函數(shù)的調(diào)用。 比如定嗓，有個(gè)a.html頁面蜕琴，它里面的代碼需要利用ajax獲取一個(gè)不同域上的json數(shù)據(jù)，假設(shè)這個(gè)json數(shù)據(jù)地址是http://damonare.cn/data.php,那么a.html中的代碼就可以這樣： <script type="text/javascript"> function dosomething(jsondata){ //處理獲得的json數(shù)據(jù) } </script> <script src="http://example.com/data.php?callback=dosomething"></script> 我們看到獲取數(shù)據(jù)的地址后面還有一個(gè)callback參數(shù)宵溅，按慣例是用這個(gè)參數(shù)名凌简，但是你用其他的也一樣。當(dāng)然如果獲取數(shù)據(jù)的jsonp地址頁面不是你自己能控制的恃逻，就得按照提供數(shù)據(jù)的那一方的規(guī)定格式來操作了雏搂。 因?yàn)槭钱?dāng)做一個(gè)js文件來引入的藕施，所以http://damonare.cn/data.php返回的必須是一個(gè)能執(zhí)行的js文件，所以這個(gè)頁面的php代碼可能是這樣的(一定要和后端約定好哦): <?php $callback = $_GET['callback'];//得到回調(diào)函數(shù)名 $data = array('a','b','c');//要返回的數(shù)據(jù) echo $callback.'('.json_encode($data).')';//輸出 ?> 最終凸郑，輸出結(jié)果為：dosomething([‘a(chǎn)’,’b’,’c’]); 如果你的頁面使用jquery裳食，那么通過它封裝的方法就能很方便的來進(jìn)行jsonp操作了。 <script type="text/javascript"> $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){ //處理獲得的json數(shù)據(jù) }); </script> jquery會(huì)自動(dòng)生成一個(gè)全局函數(shù)來替換callback=?中的問號(hào)芙沥，之后獲取到數(shù)據(jù)后又會(huì)自動(dòng)銷毀诲祸，實(shí)際上就是起一個(gè)臨時(shí)代理函數(shù)的作用。$.getJSON方法會(huì)自動(dòng)判斷是否跨域而昨，不跨域的話救氯，就調(diào)用普通的ajax方法；跨域的話歌憨，則會(huì)以異步加載js文件的形式來調(diào)用jsonp的回調(diào)函數(shù)着憨。 JSONP的優(yōu)缺點(diǎn) JSONP的優(yōu)點(diǎn)是：它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好务嫡，在更加古老的瀏覽器中都可以運(yùn)行甲抖，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過調(diào)用callback的方式回傳結(jié)果植袍。 JSONP的缺點(diǎn)則是：它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求惧眠；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁面之間如何進(jìn)行JavaScript調(diào)用的問題于个。 6. 通過CORS跨域 CORS（Cross-Origin Resource Sharing）跨域資源共享氛魁，定義了必須在訪問跨域資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通厅篓。CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通秀存，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功還是失敗。目前羽氮，所有瀏覽器都支持該功能或链，IE瀏覽器不能低于IE10。整個(gè)CORS通信過程档押，都是瀏覽器自動(dòng)完成澳盐，不需要用戶參與。對(duì)于開發(fā)者來說令宿，CORS通信與同源的AJAX通信沒有差別叼耙，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源粒没，就會(huì)自動(dòng)添加一些附加的頭信息筛婉，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺癞松。 因此爽撒，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器入蛆。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信硕勿。 平時(shí)的ajax請(qǐng)求可能是這樣的: <script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open("POST", "/damonare",true); xhr.send(); </script> 以上damonare部分是相對(duì)路徑哨毁，如果我們要使用CORS，相關(guān)Ajax代碼可能如下所示： <script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open("?GET", "http://segmentfault.com/u/trigkit4/",true); xhr.send(); </script> 代碼與之前的區(qū)別就在于相對(duì)路徑換成了其他域的絕對(duì)路徑首尼，也就是你要跨域訪問的接口地址挑庶。 服務(wù)器端對(duì)于CORS的支持，主要就是通過設(shè)置Access-Control-Allow-Origin來進(jìn)行的软能。如果瀏覽器檢測到相應(yīng)的設(shè)置迎捺，就可以允許Ajax進(jìn)行跨域的訪問。關(guān)于CORS更多了解可以看下阮一峰老師的這一篇文章：跨域資源共享 CORS 詳解 CORS和JSONP對(duì)比 JSONP只能實(shí)現(xiàn)GET請(qǐng)求查排，而CORS支持所有類型的HTTP請(qǐng)求凳枝。 使用CORS，開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù)跋核，比起JSONP有更好的錯(cuò)誤處理岖瑰。 JSONP主要被老的瀏覽器支持，它們往往不支持CORS砂代，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS）蹋订。 CORS與JSONP相比，無疑更為先進(jìn)刻伊、方便和可靠露戒。 7. 通過window.name跨域 window對(duì)象有個(gè)name屬性，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的捶箱，每個(gè)頁面對(duì)window.name都有讀寫的權(quán)限智什，window.name是持久存在一個(gè)窗口載入過的所有頁面中的，并不會(huì)因新頁面的載入而進(jìn)行重置丁屎。 比如：我們?cè)谌我庖粋€(gè)頁面輸入 window.name = "My window's name"; setTimeout(function(){ window.location.href = "http://damonare.cn/"; },1000) 進(jìn)入damonare.cn頁面后我們?cè)贆z測再檢測 window.name : window.name; // My window's name 可以看到荠锭，如果在一個(gè)標(biāo)簽里面跳轉(zhuǎn)網(wǎng)頁的話，我們的 window.name 是不會(huì)改變的晨川。 基于這個(gè)思想证九，我們可以在某個(gè)頁面設(shè)置好 window.name 的值，然后跳轉(zhuǎn)到另外一個(gè)頁面共虑。在這個(gè)頁面中就可以獲取到我們剛剛設(shè)置的 window.name 了愧怜。 由于安全原因，瀏覽器始終會(huì)保持 window.name 是string 類型看蚜。 同樣這個(gè)方法也可以應(yīng)用到和iframe的交互來： 比如：我的頁面(http://damonare.cn/index.html)中內(nèi)嵌了一個(gè)iframe： <iframe id="iframe" src="http://www.google.com/iframe.html"></iframe> 在 iframe.html 中設(shè)置好了 window.name 為我們要傳遞的字符串叫搁。 我們?cè)?index.html 中寫了下面的代碼： var iframe = document.getElementById('iframe'); var data = ''; iframe.onload = function() { data = iframe.contentWindow.name; }; Boom!報(bào)錯(cuò)赔桌！肯定的供炎，因?yàn)閮蓚€(gè)頁面不同源嘛渴逻，想要解決這個(gè)問題可以這樣干： var iframe = document.getElementById('iframe'); var data = ''; iframe.onload = function() { iframe.onload = function(){ data = iframe.contentWindow.name; } iframe.src = 'about:blank'; }; 或者將里面的 about:blank 替換成某個(gè)同源頁面（about:blank，javascript: 和 data: 中的內(nèi)容音诫，繼承了載入他們的頁面的源惨奕。） 這種方法與 document.domain 方法相比，放寬了域名后綴要相同的限制竭钝，可以從任意頁面獲取 string 類型的數(shù)據(jù)梨撞。 后記 其它諸如中間件跨域，服務(wù)器代理跨域香罐，F(xiàn)lash URLLoader跨域卧波，動(dòng)態(tài)創(chuàng)建script標(biāo)簽（簡化版本的jsonp）不作討論。

對(duì)于學(xué)習(xí)jQuery的收獲，想法的整理旦签。查坪。 write less，do more

js，css羔巢，jquery望忆，egret，layabox朵纷，cocos2dx-html等開發(fā)文章收錄

記錄JQuery的學(xué)習(xí)歷程從簡單到難袍辞，從初級(jí)到高級(jí)鞋仍！

jquery

jQuery基礎(chǔ)知識(shí)

歡迎關(guān)注，分享一個(gè)有態(tài)度的專題界拦。 1. 基礎(chǔ)：HTML教程 CSS教程 2. 進(jìn)階：Javascript教程 JQuery教程 3. 高級(jí)：AJAX教程 JSON教程 XML教程 4. 框架擴(kuò)展學(xué)習(xí)：Bootstrap教程 jQuery UI教程 jQuery EasyUI教程 jQuery Mobile教程 5. 調(diào)試工具：Firebug教程 6. 開發(fā)工具：HBuilder Sublime Text Dreamweaver Notepad++ Photoshop 如果你是程序員吸申，或者有一顆喜歡寫程序的心，喜歡分享技術(shù)干貨、項(xiàng)目經(jīng)驗(yàn)截碴，歡迎投稿專題梳侨。 專題主編：達(dá)叔 http://www.reibang.com/u/c785ece603d1 投稿須知： 1.收錄相關(guān)技術(shù)文章 2.文章內(nèi)不得有任何推廣信息 包括但不限于公眾號(hào)、微博日丹、微信走哺，更不得在通過投稿后再修改文章加入推廣信息。你可以將這些推廣以及個(gè)人信息放在個(gè)人主頁介紹里 3.字?jǐn)?shù)極少哲虾，段落混亂丙躏，大段代碼沒有放到代碼框的文章不收錄 4.不相關(guān)的內(nèi)容不收錄，請(qǐng)確認(rèn)文章內(nèi)容和本專題相關(guān) 針對(duì)優(yōu)質(zhì)作者及愛好者

主要針對(duì)前端開發(fā)一系列的技術(shù)棧，Jquery汪诉，React敢朱，Angular，Vue等具有代表性的前端技術(shù)

write less,do more