JS跨域之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸
一、 window.name的性質(zhì)
window.name
有一個奇妙的性質(zhì),
頁面如果設(shè)置了window.name
,那么在不關(guān)閉頁面的情況下,
即使進(jìn)行了頁面跳轉(zhuǎn)location.href=...
,這個window.name
還是會保留。
我們可以在控制臺做一下實驗:
// 打開瀏覽器輸入URL:www.dbjr.com.cn //F12打開控制臺 //在控制臺中依次輸入下面內(nèi)容 //輸入 window.name; //返回 '' //輸入 window.name='test'; //返回 'test' //輸入 location.; //返回 http://www.baidu.com //輸入 window.name; //返回 'test'
利用這一點,我們就可以拿到其他域中的數(shù)據(jù)了。
二、 跨域請求
我們知道,使用iframe
的src
屬性,可以加載不同域中的網(wǎng)頁,
我們也可以使用$('iframe').contentWindow
來拿到iframe
中頁面的window
對象,
只是這個window
對象中可以訪問的屬性是很少的。
//控制臺輸入 Object.keys($('iframe').contentWindow); //返回 ["postMessage", "blur", "focus", "close", "parent", "opener", "top", "length", "frames", "closed", "location", "self", "window"]
訪問其他屬性,會報錯:
Uncaught DOMException: Blocked a frame with origin "..." from accessing a cross-origin frame.
而如果使用iframe加載同域的頁面,訪問$('iframe').contentWindow
的屬性是不會報錯的,它就是iframe
內(nèi)頁面的完整的window
對象。
三、整合
利用window.name
的性質(zhì),我們可以在iframe
中加載一個跨域頁面。
這個頁面載入之后,讓它設(shè)置自己的window.name
,
然后再讓它進(jìn)行當(dāng)前頁面的跳轉(zhuǎn),跳轉(zhuǎn)到與iframe外的頁面同域的頁面,
此時window.name
是不會改變的。
這樣,iframe
內(nèi)外就屬于同一個域了,且window.name
還是跨域的頁面所設(shè)置的值。
假設(shè)有三個頁面:
a.com/app.html:應(yīng)用頁面。
a.com/proxy.html:代理文件,一般是一個沒有任何內(nèi)容的html文件,需要和應(yīng)用頁面在同一域下。
b.com/data.html:應(yīng)用頁面需要獲取數(shù)據(jù)的頁面,可稱為數(shù)據(jù)頁面。
實現(xiàn)起來基本步驟如下:
在應(yīng)用頁面(a.com/app.html)中創(chuàng)建一個iframe,把其src指向數(shù)據(jù)頁面(b.com/data.html)。
數(shù)據(jù)頁面會把數(shù)據(jù)附加到這個iframe的window.name上,data.html代碼如下:
<script type="text/javascript"> window.name = 'I was there!'; // 這里是要傳輸?shù)臄?shù)據(jù),大小一般為2M,IE和firefox下可以大至32M左右 // 數(shù)據(jù)格式可以自定義,如json、字符串 </script>
在應(yīng)用頁面(a.com/app.html)中監(jiān)聽iframe的onload事件,在此事件中設(shè)置這個iframe的src指向本地域的代理文件(代理文件和應(yīng)用頁面在同一域下,所以可以相互通信)。app.html部分代碼如下:
<script type="text/javascript"> var state = 0, iframe = document.createElement('iframe'), loadfn = function() { if (state === 1) { var data = iframe.contentWindow.name; // 讀取數(shù)據(jù) alert(data); //彈出'I was there!' } else if (state === 0) { state = 1; iframe.contentWindow.location = "http://a.com/proxy.html"; // 設(shè)置的代理文件 } }; iframe.src = 'http://b.com/data.html'; if (iframe.attachEvent) { iframe.attachEvent('onload', loadfn); } else { iframe.onload = loadfn; } document.body.appendChild(iframe); </script>
獲取數(shù)據(jù)以后銷毀這個iframe,釋放內(nèi)存;這也保證了安全(不被其他域frame js訪問)。
<script type="text/javascript"> iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); </script>
總結(jié)起來即:
iframe的src屬性由外域轉(zhuǎn)向本地域,跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制,但同時它又是安全操作。
參考文章:window.name Transport、Session variables without cookies
另一篇 JS跨域(Access-Control-Allow-Origin)前后端解決方案詳解 有更詳細(xì)的關(guān)于瀏覽器跨域問題介紹
相關(guān)文章

JavaScript面試開發(fā)常用的知識點總結(jié)

下載網(wǎng)站打開頁面后間隔多少時間才顯示下載鏈接地址的代碼

JavaScript中展開運算符及應(yīng)用的實例代碼

JavaScript實現(xiàn)點擊按鈕就復(fù)制當(dāng)前網(wǎng)址

JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享

JavaScript實現(xiàn)簡易聊天對話框(加滾動條)