javascript使用window.name解決跨域問題第1/2頁
更新時(shí)間：2008年09月06日 21:51:11 作者：
window.name 的美妙之處：name 值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB）。
window.name 傳輸技術(shù)，原本是 Thomas Frank 用于解決 cookie 的一些劣勢（每個(gè)域名 4 x 20 Kb 的限制、數(shù)據(jù)只能是字符串、設(shè)置和獲取 cookie 語法的復(fù)雜等等）而發(fā)明的（詳細(xì)見原文：《Session variables without cookies》），后來 Kris Zyp 在此方法的基礎(chǔ)上強(qiáng)化了 window.name 傳輸 ，并引入到了 Dojo （dojox.io.windowName），用來解決跨域數(shù)據(jù)傳輸問題。
window.name 傳輸技術(shù)的基本原理和步驟為：
name 在瀏覽器環(huán)境中是一個(gè)全局/window對象的屬性，且當(dāng)在 frame 中加載新頁面時(shí)，name 的屬性值依舊保持不變。通過在 iframe 中加載一個(gè)資源，該目標(biāo)頁面將設(shè)置 frame 的 name 屬性。此 name 屬性值可被獲取到，以訪問 Web 服務(wù)發(fā)送的信息。但 name 屬性僅對相同域名的 frame 可訪問。這意味著為了訪問 name 屬性，當(dāng)遠(yuǎn)程 Web 服務(wù)頁面被加載后，必須導(dǎo)航 frame 回到原始域。同源策略依舊防止其他 frame 訪問 name 屬性。一旦 name 屬性獲得，銷毀 frame 。
在最頂層，name 屬性是不安全的，對于所有后續(xù)頁面，設(shè)置在 name 屬性中的任何信息都是可獲得的。然而 windowName 模塊總是在一個(gè) iframe 中加載資源，并且一旦獲取到數(shù)據(jù)，或者當(dāng)你在最頂層瀏覽了一個(gè)新頁面，這個(gè) iframe 將被銷毀，所以其他頁面永遠(yuǎn)訪問不到 window.name 屬性。
基本實(shí)現(xiàn)代碼，基于 YUI，源自 克軍寫的樣例：
(function(){
var YUD = YAHOO.util.Dom, YUE = YAHOO.util.Event;
dataRequest = {
_doc: document,
cfg: {
proxyUrl: 'proxy.html'
}
};
dataRequest.send = function(sUrl, fnCallBack){
if(!sUrl || typeof sUrl !== 'string'){
return;
}
sUrl += (sUrl.indexOf('?') > 0 ? '&' : '?') + 'windowname=true';
var frame = this._doc.createElement('iframe'), state = 0, self = this;
this._doc.body.appendChild(frame);
frame.style.display = 'none';
var clear = function(){
try{
frame.contentWindow.document.write('');
frame.contentWindow.close();
self._doc.body.removeChild(frame);
}catch(e){}
};
var getData = function(){
try{
var da = frame.contentWindow.name;
}catch(e){}
clear();
if(fnCallBack && typeof fnCallBack === 'function'){
fnCallBack(da);
}
};
YUE.on(frame, 'load', function(){
if(state === 1){
getData();
} else if(state === 0){
state = 1;
frame.contentWindow.location = self.cfg.proxyUrl;
}
});
frame.src = sUrl;
};
})();
window.name 傳輸技術(shù)的基本原理和步驟為：
name 在瀏覽器環(huán)境中是一個(gè)全局/window對象的屬性，且當(dāng)在 frame 中加載新頁面時(shí)，name 的屬性值依舊保持不變。通過在 iframe 中加載一個(gè)資源，該目標(biāo)頁面將設(shè)置 frame 的 name 屬性。此 name 屬性值可被獲取到，以訪問 Web 服務(wù)發(fā)送的信息。但 name 屬性僅對相同域名的 frame 可訪問。這意味著為了訪問 name 屬性，當(dāng)遠(yuǎn)程 Web 服務(wù)頁面被加載后，必須導(dǎo)航 frame 回到原始域。同源策略依舊防止其他 frame 訪問 name 屬性。一旦 name 屬性獲得，銷毀 frame 。
在最頂層，name 屬性是不安全的，對于所有后續(xù)頁面，設(shè)置在 name 屬性中的任何信息都是可獲得的。然而 windowName 模塊總是在一個(gè) iframe 中加載資源，并且一旦獲取到數(shù)據(jù)，或者當(dāng)你在最頂層瀏覽了一個(gè)新頁面，這個(gè) iframe 將被銷毀，所以其他頁面永遠(yuǎn)訪問不到 window.name 屬性。
基本實(shí)現(xiàn)代碼，基于 YUI，源自 克軍寫的樣例：
復(fù)制代碼 代碼如下:
(function(){
var YUD = YAHOO.util.Dom, YUE = YAHOO.util.Event;
dataRequest = {
_doc: document,
cfg: {
proxyUrl: 'proxy.html'
}
};
dataRequest.send = function(sUrl, fnCallBack){
if(!sUrl || typeof sUrl !== 'string'){
return;
}
sUrl += (sUrl.indexOf('?') > 0 ? '&' : '?') + 'windowname=true';
var frame = this._doc.createElement('iframe'), state = 0, self = this;
this._doc.body.appendChild(frame);
frame.style.display = 'none';
var clear = function(){
try{
frame.contentWindow.document.write('');
frame.contentWindow.close();
self._doc.body.removeChild(frame);
}catch(e){}
};
var getData = function(){
try{
var da = frame.contentWindow.name;
}catch(e){}
clear();
if(fnCallBack && typeof fnCallBack === 'function'){
fnCallBack(da);
}
};
YUE.on(frame, 'load', function(){
if(state === 1){
getData();
} else if(state === 0){
state = 1;
frame.contentWindow.location = self.cfg.proxyUrl;
}
});
frame.src = sUrl;
};
})();
相關(guān)文章
JS利用window.print()實(shí)現(xiàn)網(wǎng)頁打印功能
print作為瀏覽已經(jīng)比較成熟的技術(shù)可以經(jīng)常被用來打印頁面的部分內(nèi)容。本文將在JS中調(diào)用window.print()方法實(shí)現(xiàn)網(wǎng)頁打印功能，感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-04-04
JS錯(cuò)誤處理與調(diào)試操作實(shí)例分析
這篇文章主要介紹了JS錯(cuò)誤處理與調(diào)試操作,結(jié)合實(shí)例形式分析了JavaScript錯(cuò)誤捕獲、處理、調(diào)試工具、斷點(diǎn)調(diào)試等相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
JavaScript運(yùn)動(dòng)減速效果實(shí)例分析
這篇文章主要介紹了JavaScript運(yùn)動(dòng)減速效果,模擬了物體做減速運(yùn)動(dòng)的效果,以兩個(gè)實(shí)例形式分析了javascript實(shí)現(xiàn)物體做減速運(yùn)動(dòng)的實(shí)現(xiàn)技巧,涉及javascript動(dòng)態(tài)操作頁面元素樣式及數(shù)學(xué)運(yùn)算的方法,非常簡潔實(shí)用,需要的朋友可以參考下2015-08-08
由于微信小程序線上的資源限制了各種接口安全域名,所以在小程序里如果想使用iconfont字體圖標(biāo)就會稍有不同,下面這篇文章主要給大家介紹了關(guān)于在微信小程序中使用iconfont的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript中0、空字符串、''0''是true還是false的知識點(diǎn)分享
在本篇文章里小編給大家整理的是JavaScript中0、空字符串、'0'是true還是false的知識點(diǎn)分享，有需要的朋友們參考下。2019-09-09
JavaScript函數(shù)參數(shù)的傳遞方式詳解
本文主要介紹了JavaScript函數(shù)參數(shù)的傳遞方式，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
文章介紹了如何在uniapp抖音小程序中通過點(diǎn)擊按鈕一鍵獲取用戶手機(jī)號,encryptedData和iv通過點(diǎn)擊按鈕回傳,后端部分通過解密獲取手機(jī)號,感興趣的朋友一起看看吧2024-12-12
HTML+CSS+JavaScript實(shí)現(xiàn)簡單日歷效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript循環(huán)鏈表實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)鏈表實(shí)現(xiàn)的相關(guān)資料,循環(huán)鏈表和單向鏈表很相似,唯一的區(qū)別是循環(huán)鏈表的尾節(jié)點(diǎn)是指向頭節(jié)點(diǎn)的,需要的朋友可以參考下2023-07-07
webpack幾種手動(dòng)實(shí)現(xiàn)HMR的方式
眾所周知，在webpack中使用模塊熱替換(HMR)，能夠使得應(yīng)用在運(yùn)行時(shí)，本文就介紹一下如何實(shí)現(xiàn)HMR，感興趣的可以了解一下2021-07-07