頁(yè)面內(nèi)嵌樣式表中使用url()，出現(xiàn)頁(yè)面多次載入問(wèn)題解決

2024-07-11 08:29:31

字體：大中小

供稿：網(wǎng)友

在最近的一個(gè)項(xiàng)目中，為了跟蹤用戶(hù)的登錄的次數(shù)，我們?cè)陧?yè)面打開(kāi)時(shí)，將用戶(hù)登錄頁(yè)面的信息進(jìn)行記錄。可在測(cè)試中卻發(fā)現(xiàn)一個(gè)用戶(hù)訪問(wèn)一次的頁(yè)面，卻被記錄了二次，也就是說(shuō)頁(yè)面被載入了二次。進(jìn)一步測(cè)試后發(fā)現(xiàn)此問(wèn)題，只是在FireFox，Google Chrome瀏覽器上才會(huì)出現(xiàn)。通過(guò)使用Fiddler監(jiān)控發(fā)現(xiàn)，頁(yè)面在很短的時(shí)間內(nèi)被瀏覽器載入了二次。
發(fā)生如此離奇的問(wèn)題，讓我們百思不得其解。因?yàn)樵陧?yè)面中，并不存在通過(guò)Javascript來(lái)觸發(fā)頁(yè)面刷新；也不存在頁(yè)面的特殊設(shè)置，讓頁(yè)面自動(dòng)進(jìn)行定時(shí)的刷新功能。不得已，只能采用笨方法，將頁(yè)面中的內(nèi)容一點(diǎn)點(diǎn)的刪除掉，最后發(fā)現(xiàn)當(dāng)頁(yè)面內(nèi)嵌的樣式存在時(shí)，頁(yè)面就會(huì)被重復(fù)載入。樣式如下：

復(fù)制代碼

代碼如下:
<style type="text/css">
content-wrap .wrap-main{background:url();}
content-wrap .wrap-main .colcomm .more{}
tem-main .left .col,.tem-main .left-3 .col,.tem-main .right-3 .col{margin-bottom:5px}
</style>

在樣式表中，為了將來(lái)自樣式文件中的.wrap-main的背景圖片給忽略掉，這里采用了在頁(yè)面文件中再次定義了.wrap-main的背景圖片，所以就出現(xiàn)了樣式表中第一行出現(xiàn)的

content-wrap .wrap-main{background:url();}
通過(guò)分析認(rèn)為，頁(yè)面的二次加載的問(wèn)題，很可能會(huì)與該處的樣式設(shè)置有關(guān)，于是將樣式修改為等價(jià)的：

content-wrap .wrap-main{background-image:none;}
再次運(yùn)行頁(yè)面，并通過(guò)Fiddler進(jìn)行跟蹤，這次頁(yè)面只加載了一次。看來(lái)問(wèn)題確實(shí)是由于在頁(yè)面的內(nèi)嵌樣式中錯(cuò)誤地使用了url()引起的。

針對(duì)這個(gè)問(wèn)題，我進(jìn)一步進(jìn)行了分析，得到如下結(jié)論：
1）在頁(yè)面內(nèi)嵌的樣式表中，如果出現(xiàn)url()或url("")之類(lèi)的，F(xiàn)ireFox、Google Chrome瀏覽器會(huì)將url()或url("")解析為當(dāng)前頁(yè)面的地址，所以會(huì)再次請(qǐng)求同一個(gè)頁(yè)面，這樣就出現(xiàn)了同一個(gè)頁(yè)面被載入二次的問(wèn)題。因此，如果要在內(nèi)嵌樣式表中實(shí)現(xiàn)諸如取消背景圖片的樣式時(shí)，可以采用background-image:none而不要采用background:url().
2）在.CSS文件中是的樣式，如果出現(xiàn)url()或url(""),同樣會(huì)導(dǎo)致.CSS文件被加載二次的問(wèn)題。只是由于.CSS文件常常會(huì)在本地有緩存，所以當(dāng)發(fā)現(xiàn)文件沒(méi)有修改時(shí)就不會(huì)再次請(qǐng)求同一個(gè).CSS文件。

上一篇：25個(gè)CSS3動(dòng)畫(huà)按鈕和菜單教程分享

下一篇：W3C是什么意思 W3C標(biāo)準(zhǔn)簡(jiǎn)介