javascript使用window.name解決跨域問題第1/2頁(yè)
更新時(shí)間:2008年09月06日 21:51:11 作者:
window.name 的美妙之處:name 值在不同的頁(yè)面(甚至不同域名)加載后依舊存在,并且可以支持非常長(zhǎng)的 name 值(2MB)。
window.name 傳輸技術(shù),原本是 Thomas Frank 用于解決 cookie 的一些劣勢(shì)(每個(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對(duì)象的屬性,且當(dāng)在 frame 中加載新頁(yè)面時(shí),name 的屬性值依舊保持不變。通過在 iframe 中加載一個(gè)資源,該目標(biāo)頁(yè)面將設(shè)置 frame 的 name 屬性。此 name 屬性值可被獲取到,以訪問 Web 服務(wù)發(fā)送的信息。但 name 屬性僅對(duì)相同域名的 frame 可訪問。這意味著為了訪問 name 屬性,當(dāng)遠(yuǎn)程 Web 服務(wù)頁(yè)面被加載后,必須導(dǎo)航 frame 回到原始域。同源策略依舊防止其他 frame 訪問 name 屬性。一旦 name 屬性獲得,銷毀 frame 。
在最頂層,name 屬性是不安全的,對(duì)于所有后續(xù)頁(yè)面,設(shè)置在 name 屬性中的任何信息都是可獲得的。然而 windowName 模塊總是在一個(gè) iframe 中加載資源,并且一旦獲取到數(shù)據(jù),或者當(dāng)你在最頂層瀏覽了一個(gè)新頁(yè)面,這個(gè) iframe 將被銷毀,所以其他頁(yè)面永遠(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對(duì)象的屬性,且當(dāng)在 frame 中加載新頁(yè)面時(shí),name 的屬性值依舊保持不變。通過在 iframe 中加載一個(gè)資源,該目標(biāo)頁(yè)面將設(shè)置 frame 的 name 屬性。此 name 屬性值可被獲取到,以訪問 Web 服務(wù)發(fā)送的信息。但 name 屬性僅對(duì)相同域名的 frame 可訪問。這意味著為了訪問 name 屬性,當(dāng)遠(yuǎn)程 Web 服務(wù)頁(yè)面被加載后,必須導(dǎo)航 frame 回到原始域。同源策略依舊防止其他 frame 訪問 name 屬性。一旦 name 屬性獲得,銷毀 frame 。
在最頂層,name 屬性是不安全的,對(duì)于所有后續(xù)頁(yè)面,設(shè)置在 name 屬性中的任何信息都是可獲得的。然而 windowName 模塊總是在一個(gè) iframe 中加載資源,并且一旦獲取到數(shù)據(jù),或者當(dāng)你在最頂層瀏覽了一個(gè)新頁(yè)面,這個(gè) iframe 將被銷毀,所以其他頁(yè)面永遠(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利用數(shù)組length屬性清空和截短數(shù)組的小例子
這篇文章主要介紹了js利用數(shù)組length屬性清空和截短數(shù)組的小例子,有需要的朋友可以參考一下2014-01-01JS基于Ajax實(shí)現(xiàn)的網(wǎng)頁(yè)Loading效果代碼
這篇文章主要介紹了JS基于Ajax實(shí)現(xiàn)的網(wǎng)頁(yè)Loading效果代碼,通過時(shí)間函數(shù)結(jié)合數(shù)學(xué)運(yùn)算實(shí)現(xiàn)頁(yè)面樣式的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)下拉菜單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11詳解JavaScript私有類字段和TypeScript私有修飾符
這篇文章主要介紹了JavaScript私有類字段和TypeScript私有修飾符,對(duì)私有類感興趣的同學(xué),可以參考下2021-04-04處理JavaScript值為undefined的7個(gè)小技巧
這篇文章主要介紹了處理JavaScript值為undefined的7個(gè)小技巧,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07微信小程序?qū)崿F(xiàn)簡(jiǎn)單的搖骰子游戲
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的搖骰子游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05javascript實(shí)現(xiàn)異形滾動(dòng)輪播
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)異形滾動(dòng)輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11