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)文章
javascript下過(guò)濾數(shù)組重復(fù)值的代碼
javascript下過(guò)濾數(shù)組重復(fù)值的代碼...2007-09-09
微信小程序template模板引入的問(wèn)題小結(jié)
這篇文章主要介紹了微信小程序template模板引入的問(wèn)題小結(jié),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
淺談js中startsWith 函數(shù)不能在任何瀏覽器兼容的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談js中startsWith 函數(shù)不能在任何瀏覽器兼容的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
JavaScript實(shí)現(xiàn)動(dòng)態(tài)高度過(guò)渡的3種方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)高度過(guò)渡的3種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
JS實(shí)現(xiàn)針對(duì)給定時(shí)間的倒計(jì)時(shí)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)針對(duì)給定時(shí)間的倒計(jì)時(shí)功能,結(jié)合具體實(shí)例形式分析了javascript日期時(shí)間的正則判定與動(dòng)態(tài)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
前端使用國(guó)密sm2和sm4進(jìn)行加解密代碼示例
在前端實(shí)現(xiàn)加密算法時(shí),需要特別注意密鑰的安全存儲(chǔ)和管理,不應(yīng)將敏感的密鑰硬編碼在前端代碼中,這篇文章主要介紹了前端使用國(guó)密sm2和sm4進(jìn)行加解密的相關(guān)資料,需要的朋友可以參考下2025-04-04
Moment.js是一個(gè)輕量級(jí)的JavaScript時(shí)間庫(kù),通常會(huì)對(duì)時(shí)間進(jìn)行下面這幾個(gè)操作：比如獲取時(shí)間,設(shè)置時(shí)間,格式化時(shí)間,比較時(shí)間等等,本文就來(lái)介紹一下如何使用,感興趣的可以了解下2023-09-09
Bootstrap進(jìn)度條學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap進(jìn)度條的學(xué)習(xí)使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
詳解webpack中的hash、chunkhash、contenthash區(qū)別
這篇文章主要介紹了詳解webpack中的hash、chunkhash、contenthash區(qū)別，詳細(xì)的介紹了hash、chunkhash、contenthash的用法和區(qū)別，有興趣的可以了解一下2018-01-01
一文詳解如何在uniapp中優(yōu)雅地使用WebView
最近工作中遇到webview,對(duì)于我這個(gè)剛接觸前端的小白來(lái)說(shuō)真的不懂啥意思,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中優(yōu)雅地使用WebView的相關(guān)資料,需要的朋友可以參考下2023-01-01