今天某個(gè)同事遇到一個(gè)詭異的問(wèn)題，問(wèn)題描述如下：

需求：通過(guò)腳本動(dòng)態(tài)修改script標(biāo)簽的src來(lái)載入一段外部腳本并執(zhí)行

實(shí)現(xiàn)方式(#1)：

document.getElementById('external-script').src='url2';

url2的內(nèi)容如下：

alert('I am dynamic');

結(jié)果：

Chrome: 什么事都沒(méi)發(fā)生(沒(méi)有請(qǐng)求url2)

Firefox: 什么事都沒(méi)發(fā)生(沒(méi)有請(qǐng)求url2)

IE9：什么事都沒(méi)發(fā)生(請(qǐng)求url2但不執(zhí)行url2的腳本)

IE(6,7,8): I am dynamic(請(qǐng)求并執(zhí)行了url2的腳本)

注意實(shí)現(xiàn)方式中，第一段的script標(biāo)簽中間是有內(nèi)容的(空格、換行符以及回車符)。

如何來(lái)解釋這個(gè)問(wèn)題呢？要解釋這個(gè)問(wèn)題，我們來(lái)看兩個(gè)變種的例子，第一個(gè)例子(明確內(nèi)聯(lián)內(nèi)容)，如下所示(#2)：

alert('I am inline');

document.getElementById('external-script').src='url2';

結(jié)果如下：

Chrome: I am inline(沒(méi)有請(qǐng)求url2)

Firefox: I am inline(沒(méi)有請(qǐng)求url2)

IE9：I am inline(請(qǐng)求url2但不執(zhí)行url2的腳本)

IE(6,7,8): I am inline I am dynamic(請(qǐng)求并執(zhí)行了url2的腳本)

再來(lái)看看第二個(gè)變種的例子(#3)：

alert('I am inline script');

document.getElementById('external-script').src='url2';

其中url1的內(nèi)容如下：

alert('I am url1');

結(jié)果如下：

Chrome: I am url1(沒(méi)有請(qǐng)求url2)

Firefox: I am url1(沒(méi)有請(qǐng)求url2)

IE9：I am url1(請(qǐng)求url2但不執(zhí)行url2的腳本)

IE(6,7,8): I am url1 I am dynamic(請(qǐng)求并執(zhí)行了url2的腳本)

首先這里肯定的是src屬性是修改成功的，可以通過(guò)看dom的變化看到src已經(jīng)設(shè)置進(jìn)去了。這個(gè)時(shí)候我們比對(duì)這三個(gè)例子，思考幾十秒。分析下這三個(gè)例子，其實(shí)#2和#1是一樣的，這里用#2是為了說(shuō)明#1中的空格、換行符以及回車符會(huì)被瀏覽器認(rèn)為是內(nèi)聯(lián)的腳本。通過(guò)比對(duì)#2和#3，是不是會(huì)讓你想到什么？沒(méi)錯(cuò)，我們第一個(gè)會(huì)想到的就是：當(dāng)script標(biāo)簽既有src屬性又有內(nèi)聯(lián)腳本的時(shí)候?yàn)g覽器該如何處理？ ， 先來(lái)解釋這個(gè)問(wèn)題。

一談到瀏覽器應(yīng)該怎樣處理，就不得不翻出各種寶典，這次不再是葵花寶典了，而是九陰真經(jīng)(W3C的HTML4標(biāo)準(zhǔn))，標(biāo)準(zhǔn)中關(guān)于script標(biāo)簽的src部分有如下一段話：

If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI

上面這段話的意思就是說(shuō)：如果src沒(méi)有設(shè)置，那么就執(zhí)行內(nèi)聯(lián)腳本，如果src設(shè)置了瀏覽器就必須忽略內(nèi)斂腳本而要去請(qǐng)求src指定的url的內(nèi)容

這解釋了為什么#3中標(biāo)準(zhǔn)瀏覽器(甚至IE6，7，8)都沒(méi)有執(zhí)行內(nèi)聯(lián)腳本(因?yàn)閟rc設(shè)置了url1)。

搞清楚了這個(gè)基礎(chǔ)問(wèn)題之后，接下來(lái)問(wèn)題就定位到了動(dòng)態(tài)修改script的src屬性的時(shí)候?yàn)g覽器如何處理？ ，從結(jié)果來(lái)看，標(biāo)準(zhǔn)的瀏覽器都沒(méi)有去請(qǐng)求url2(更改src無(wú)效)，這回IE6，7，8終于犯傻了。當(dāng)然了，咱們也不能隨隨便便說(shuō)人家犯傻，要拿出證據(jù)，這個(gè)時(shí)候繼續(xù)拿出九陰真經(jīng)W3C的HTML5標(biāo)準(zhǔn)，其中有這樣一句話：

Changing the src, type, charset, async, and defer attributes dynamically has no direct effect; these attribute are only used at specific times described below.

意思就是說(shuō)：修改src是沒(méi)用的，對(duì)src的處理只會(huì)在特定的時(shí)候進(jìn)行(個(gè)人猜測(cè)就是第一次看到這個(gè)屬性的時(shí)候?yàn)g覽器會(huì)去做相應(yīng)處理，之后就無(wú)視它了)。

好了，這下真相大白了：這解釋了為啥#3和#1中除了IE6，7，8之外其他瀏覽器都沒(méi)有去請(qǐng)求url2(IE9請(qǐng)求了，但沒(méi)執(zhí)行)，而且實(shí)驗(yàn)發(fā)現(xiàn)IE6，7，8對(duì)動(dòng)態(tài)修改src都會(huì)做請(qǐng)求執(zhí)行處理。

最后，這個(gè)故事至少告訴我們：寫script標(biāo)簽的時(shí)候千萬(wàn)別手賤打回車。

參考文檔：

總結(jié)

以上是生活随笔為你收集整理的html script src属性,动态修改script标签中的src属性存在的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。