在requireJS中,有一個(gè)屬性叫baseURL,通過(guò)設(shè)置baseURL,我們可以將需要加載的文件路徑寫(xiě)成相對(duì)于項(xiàng)目的,而不是相對(duì)于當(dāng)前頁(yè)面的。
例如:假設(shè)我們的項(xiàng)目目錄是/myproject/,里面有兩個(gè)頁(yè)面,一個(gè)是/myproject/one.html,另一個(gè)是/myproject/html/other.html,他們都要加載/myproject/js/some.js。如果我們將baseURL設(shè)置成/myproject/,則我們?cè)诩虞d該js的時(shí)候,這兩個(gè)頁(yè)面都可以使用相對(duì)于項(xiàng)目的路徑./js/some,而不是因?yàn)轫?yè)面的路徑不同而使用不同的相對(duì)路徑。
但是如果不使用requireJS,我們能不能實(shí)現(xiàn)類(lèi)似于baseURL的功能呢?
base標(biāo)簽
其實(shí),HTML中有一個(gè)base標(biāo)簽,可以產(chǎn)生類(lèi)似的功能。舉個(gè)例子:
復(fù)制代碼
代碼如下:
<html>
<head>
<base href="http://static.cnblogs.com/" />
</head>
<body>
<img src="./images/logo_gray.gif" />
</body>
</html>
我們會(huì)發(fā)現(xiàn),我們用相對(duì)路徑./images/logo_gray.gif加載的圖片,卻變成了http://static.cnblogs.com/images/logo_gray.gif的圖片。base標(biāo)簽可以給頁(yè)面的鏈接加上默認(rèn)的路徑,或者默認(rèn)的打開(kāi)方式。
下面是一個(gè)設(shè)置默認(rèn)打開(kāi)方式的例子:
復(fù)制代碼
代碼如下:
<html>
<head>
<base target="_blank" />
</head></p> <p><body>
<a href="http://www.cnblogs.com">這個(gè)頁(yè)面會(huì)在新窗口打開(kāi)</a>
<a href="http://justany.cnblogs.com">這個(gè)頁(yè)面也會(huì)在新窗口打開(kāi)</a>
</body>
</html>
一個(gè)BUG
base標(biāo)簽最好不要?jiǎng)討B(tài)寫(xiě)入,否則在Firefox和IE中會(huì)有一個(gè)小bug,比如對(duì)于頁(yè)面http://localhost/static/test.html:
復(fù)制代碼
代碼如下:
<html>
<head>
<script>
document.write('<base href="http://localhost/" />');
</script>
</head></p> <p><body>
<img src="static/1.jpg" />
</body>
</html>
Firefox和IE中會(huì)先加載http://localhost/static/static/1.jpg,然后再加載http://localhost/static/1.jpg。也就是說(shuō),他們都先嘗試用相對(duì)于當(dāng)前頁(yè)面的路徑進(jìn)行加載,然后再通過(guò)base標(biāo)簽設(shè)置的默認(rèn)路徑加載。
編輯
Chrome的加載正常。
Firefox的加載不正常。
Why?
這個(gè)我們并沒(méi)有找到很好的解釋?zhuān)覀兊姆治鍪菫g覽器對(duì)資源加載進(jìn)行了優(yōu)化,導(dǎo)致動(dòng)態(tài)插入base標(biāo)簽并未生效時(shí),就預(yù)先去加載了,結(jié)果出錯(cuò),然后base標(biāo)簽生效于是又加載正確的資源。
如何避免呢?不動(dòng)態(tài)寫(xiě)入base標(biāo)簽?zāi)敲淳蜎](méi)有任何問(wèn)題。如果需要?jiǎng)討B(tài)寫(xiě)入base標(biāo)簽,那么頁(yè)面所有引用的外部資源都需要通過(guò)JAVAscript動(dòng)態(tài)加載。
本文由建站免費(fèi)素材圈sucaiq.com分享!!!
如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)素材圈的支持!若你覺(jué)得本文
對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!