javascript跨域總結(jié)之window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸
自己實(shí)踐了一下,真的很好用。特將具體實(shí)現(xiàn)方法記錄如下
有三個(gè)頁(yè)面:
a.com/app.html:應(yīng)用頁(yè)面。
a.com/proxy.html:代理文件,一般是一個(gè)沒(méi)有任何內(nèi)容的html文件,需要和應(yīng)用頁(yè)面在同一域下。
b.com/data.html:應(yīng)用頁(yè)面需要獲取數(shù)據(jù)的頁(yè)面,可稱為數(shù)據(jù)頁(yè)面。
實(shí)現(xiàn)起來(lái)基本步驟如下:
在應(yīng)用頁(yè)面(a.com/app.html)中創(chuàng)建一個(gè)iframe,把其src指向數(shù)據(jù)頁(yè)面(b.com/data.html)。
數(shù)據(jù)頁(yè)面會(huì)把數(shù)據(jù)附加到這個(gè)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)用頁(yè)面(a.com/app.html)中監(jiān)聽(tīng)iframe的onload事件,在此事件中設(shè)置這個(gè)iframe的src指向本地域的代理文件(代理文件和應(yīng)用頁(yè)面在同一域下,所以可以相互通信)。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ù)以后銷毀這個(gè)iframe,釋放內(nèi)存;這也保證了安全(不被其他域frame js訪問(wèn))。
<script type="text/javascript"> iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); </script>
總結(jié)起來(lái)即:iframe的src屬性由外域轉(zhuǎn)向本地域,跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。這個(gè)就巧妙地繞過(guò)了瀏覽器的跨域訪問(wèn)限制,但同時(shí)它又是安全操作。
相關(guān)文章
JS實(shí)現(xiàn)返回上一頁(yè)并刷新頁(yè)面的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)返回上一頁(yè)并刷新頁(yè)面的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)移動(dòng)端、PC端瀏覽器的頁(yè)面緩存刷新相關(guān)操作技巧,需要的朋友可以參考下2019-07-07JS pushlet XMLAdapter適配器用法案例解析
這篇文章主要介紹了JS pushlet XMLAdapter適配器用法案例解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10基于JavaScript實(shí)現(xiàn)瀑布流布局
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)瀑布流布局,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08淺析javascript中函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別
這篇文章主要介紹了淺析javascript中函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別,需要的朋友可以參考下2015-02-02js實(shí)現(xiàn)鼠標(biāo)移入圖片放大效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移入圖片放大效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07BootStrap中Table隱藏后顯示問(wèn)題的實(shí)現(xiàn)代碼
這篇文章主要介紹了BootStrap中Table隱藏后顯示問(wèn)題的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08js下通過(guò)getList函數(shù)實(shí)現(xiàn)分頁(yè)效果的代碼
js下通過(guò)getList函數(shù)實(shí)現(xiàn)分頁(yè)效果的代碼,需要通過(guò)js分頁(yè)的朋友可以參考下。2010-09-09