Firefox返回時(shí)Iframe的顯示Bug的解決方法
更新時(shí)間:2008年05月16日 22:52:21 作者:
一個(gè)頁面有4個(gè)Iframe來顯示flash內(nèi)容,其中第二個(gè)iframe的顯示是用Javascript控制的,只有當(dāng)特定的cookie存在時(shí)才出現(xiàn),否則顯示普通的文本。
<script type="text/javascript">//<![CDATA[
if(getCookie('firefoxIframe')){
document.write('<p id="addAd"><a href="cookie.html">點(diǎn)擊這里刪除這個(gè)iframe</a></p>');
document.write('<iframe height="120" width="300" marginheight="0" marginwidth="0"
frameborder="0" src="nAdPre.swf"></iframe>');
}else{
document.write('<p id="addAd"><a href="cookie.html">點(diǎn)擊這里增加一個(gè)iframe</a></p>');
}
//]]></script>
打開Bug演示,由于cookie不存在,顯示的三個(gè)flash都是通過Iframe實(shí)現(xiàn)的
點(diǎn)擊“點(diǎn)擊這里增加一個(gè)iframe廣告”,跳轉(zhuǎn)到一個(gè)新的頁面寫入名為firefoxIframe的Cookie
點(diǎn)擊“返回”或者瀏覽器的返回按鈕,回到Bug演示頁面,發(fā)現(xiàn)iframe里面的flash錯(cuò)位,即位置2的iframe鏈接的flash并沒有載入,顯示的是位置3的flash,位置3的顯示的是位置4的flash,位置4的flash卻依舊存在。
關(guān)閉標(biāo)簽頁(不是關(guān)閉整個(gè)瀏覽器,如果關(guān)閉整個(gè)瀏覽器Cookie也失效)或新打開一個(gè)標(biāo)簽頁重新載入該頁面,4個(gè)Iframe正常顯示4個(gè)flash
此時(shí)如果點(diǎn)擊“點(diǎn)擊這里刪除這個(gè)iframe廣告”,跳轉(zhuǎn)到新頁面刪除Cookie,返回也發(fā)現(xiàn)Iframe中的flash錯(cuò)位
如果寫入Cookie或者刪除Cookie時(shí),不通過瀏覽器的返回,直接通過網(wǎng)址訪問,則不會(huì)出現(xiàn)錯(cuò)位
簡單分析和解決方案
似乎Firefox返回時(shí),Javascript重新執(zhí)行了,但是Iframe并未依據(jù)src屬性重新載入,而是給Iframe和src以類似編號(hào)似的配對(duì),而由于返回時(shí)Javascript的執(zhí)行,導(dǎo)致Iframe多了一個(gè)(或少了一個(gè)),這就導(dǎo)致后面的配對(duì)錯(cuò)位。
以上僅為猜測(cè),但這的確是Firefox(2.0.0.3)的一個(gè)bug,IE返回時(shí)Javascript重新執(zhí)行,并且Iframe的依據(jù)src重新載入,Opera返回時(shí)Javascript不重新執(zhí)行,頁面沒有變化。
解決方案是在文本中增加一個(gè)隱藏的Iframe來占位,上面代碼修改如下代碼如下:
document.write('<p id="addAd"><a href="cookie.html">點(diǎn)擊這里增加一個(gè)iframe</a></p>');
//把上面的代碼修改成為
document.write('<iframe src="#" style="display:none;"></iframe>');
document.write('<p id="addAd"><a href="cookie.html">點(diǎn)擊這里增加一個(gè)iframe</a></p>');
if(getCookie('firefoxIframe')){
document.write('<p id="addAd"><a href="cookie.html">點(diǎn)擊這里刪除這個(gè)iframe</a></p>');
document.write('<iframe height="120" width="300" marginheight="0" marginwidth="0"
frameborder="0" src="nAdPre.swf"></iframe>');
}else{
document.write('<p id="addAd"><a href="cookie.html">點(diǎn)擊這里增加一個(gè)iframe</a></p>');
}
//]]></script>
打開Bug演示,由于cookie不存在,顯示的三個(gè)flash都是通過Iframe實(shí)現(xiàn)的
點(diǎn)擊“點(diǎn)擊這里增加一個(gè)iframe廣告”,跳轉(zhuǎn)到一個(gè)新的頁面寫入名為firefoxIframe的Cookie
點(diǎn)擊“返回”或者瀏覽器的返回按鈕,回到Bug演示頁面,發(fā)現(xiàn)iframe里面的flash錯(cuò)位,即位置2的iframe鏈接的flash并沒有載入,顯示的是位置3的flash,位置3的顯示的是位置4的flash,位置4的flash卻依舊存在。
關(guān)閉標(biāo)簽頁(不是關(guān)閉整個(gè)瀏覽器,如果關(guān)閉整個(gè)瀏覽器Cookie也失效)或新打開一個(gè)標(biāo)簽頁重新載入該頁面,4個(gè)Iframe正常顯示4個(gè)flash
此時(shí)如果點(diǎn)擊“點(diǎn)擊這里刪除這個(gè)iframe廣告”,跳轉(zhuǎn)到新頁面刪除Cookie,返回也發(fā)現(xiàn)Iframe中的flash錯(cuò)位
如果寫入Cookie或者刪除Cookie時(shí),不通過瀏覽器的返回,直接通過網(wǎng)址訪問,則不會(huì)出現(xiàn)錯(cuò)位
簡單分析和解決方案
似乎Firefox返回時(shí),Javascript重新執(zhí)行了,但是Iframe并未依據(jù)src屬性重新載入,而是給Iframe和src以類似編號(hào)似的配對(duì),而由于返回時(shí)Javascript的執(zhí)行,導(dǎo)致Iframe多了一個(gè)(或少了一個(gè)),這就導(dǎo)致后面的配對(duì)錯(cuò)位。
以上僅為猜測(cè),但這的確是Firefox(2.0.0.3)的一個(gè)bug,IE返回時(shí)Javascript重新執(zhí)行,并且Iframe的依據(jù)src重新載入,Opera返回時(shí)Javascript不重新執(zhí)行,頁面沒有變化。
解決方案是在文本中增加一個(gè)隱藏的Iframe來占位,上面代碼修改如下代碼如下:
document.write('<p id="addAd"><a href="cookie.html">點(diǎn)擊這里增加一個(gè)iframe</a></p>');
//把上面的代碼修改成為
document.write('<iframe src="#" style="display:none;"></iframe>');
document.write('<p id="addAd"><a href="cookie.html">點(diǎn)擊這里增加一個(gè)iframe</a></p>');
相關(guān)文章
引用字體時(shí)圖標(biāo)無法顯示_字體文件不存在問題
最近一個(gè)項(xiàng)目,css,js等靜態(tài)資源做了cdn部署,瀏覽網(wǎng)站時(shí)發(fā)現(xiàn)font?awesome字體圖標(biāo)通通不能正常顯示。只有一些奇怪的符號(hào)。瀏覽器控制臺(tái)報(bào)錯(cuò)信息:font-face引用字體跨域。2023-06-06Firefox2中輸入框丟失光標(biāo)bug的解決方法
在Firefox2中某些情況下輸入框雖然可以輸入,但在獲取焦點(diǎn)時(shí)沒有文本輸入光標(biāo)的顯示,這個(gè)是非常惡心的bug,非常容易讓表單使用者有一種不能輸入的錯(cuò)覺,即使后來嘗試知道可以輸入,但也無法判斷光標(biāo)定位在哪兒。2008-05-05一個(gè)老外弄的Clearing floats(清除浮動(dòng)的方法)
一個(gè)老外弄的Clearing floats(清除浮動(dòng)的方法)...2007-09-09提高CSS網(wǎng)頁渲染效率的11點(diǎn)注意事項(xiàng)
CSS學(xué)習(xí)越深入,我們需要關(guān)注的細(xì)節(jié)之處就越多,今天我們通過11個(gè)注意點(diǎn)來提高CSS的網(wǎng)頁渲染效率。2008-08-08CSSvista可同時(shí)在IE和Fifrefox調(diào)試的CSS編輯提供下載
CSSvista:可同時(shí)在IE和Fifrefox調(diào)試的CSS編輯器 CSSvista是一個(gè)免費(fèi)的Windows增強(qiáng)應(yīng)用程序,為Web開發(fā)人員準(zhǔn)備的一個(gè)CSS編輯器。它可以讓你同時(shí)在IE和Firefox下調(diào)試你的CSS樣式表代碼。2008-06-06