今天某個同事遇到一個詭異的問題，問題描述如下：

需求：通過腳本動態修改script標簽的src來載入一段外部腳本并執行

實現方式(#1)：

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

url2的內容如下：

alert('I am dynamic');

結果：

Chrome: 什么事都沒發生(沒有請求url2)

Firefox: 什么事都沒發生(沒有請求url2)

IE9：什么事都沒發生(請求url2但不執行url2的腳本)

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

注意實現方式中，第一段的script標簽中間是有內容的(空格、換行符以及回車符)。

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

alert('I am inline');

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

結果如下：

Chrome: I am inline(沒有請求url2)

Firefox: I am inline(沒有請求url2)

IE9：I am inline(請求url2但不執行url2的腳本)

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

再來看看第二個變種的例子(#3)：

alert('I am inline script');

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

其中url1的內容如下：

alert('I am url1');

結果如下：

Chrome: I am url1(沒有請求url2)

Firefox: I am url1(沒有請求url2)

IE9：I am url1(請求url2但不執行url2的腳本)

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

首先這里肯定的是src屬性是修改成功的，可以通過看dom的變化看到src已經設置進去了。這個時候我們比對這三個例子，思考幾十秒。分析下這三個例子，其實#2和#1是一樣的，這里用#2是為了說明#1中的空格、換行符以及回車符會被瀏覽器認為是內聯的腳本。通過比對#2和#3，是不是會讓你想到什么？沒錯，我們第一個會想到的就是：當script標簽既有src屬性又有內聯腳本的時候瀏覽器該如何處理？ ， 先來解釋這個問題。

一談到瀏覽器應該怎樣處理，就不得不翻出各種寶典，這次不再是葵花寶典了，而是九陰真經(W3C的HTML4標準)，標準中關于script標簽的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

上面這段話的意思就是說：如果src沒有設置，那么就執行內聯腳本，如果src設置了瀏覽器就必須忽略內斂腳本而要去請求src指定的url的內容

這解釋了為什么#3中標準瀏覽器(甚至IE6，7，8)都沒有執行內聯腳本(因為src設置了url1)。

搞清楚了這個基礎問題之后，接下來問題就定位到了動態修改script的src屬性的時候瀏覽器如何處理？ ，從結果來看，標準的瀏覽器都沒有去請求url2(更改src無效)，這回IE6，7，8終于犯傻了。當然了，咱們也不能隨隨便便說人家犯傻，要拿出證據，這個時候繼續拿出九陰真經W3C的HTML5標準，其中有這樣一句話：

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

意思就是說：修改src是沒用的，對src的處理只會在特定的時候進行(個人猜測就是第一次看到這個屬性的時候瀏覽器會去做相應處理，之后就無視它了)。

好了，這下真相大白了：這解釋了為啥#3和#1中除了IE6，7，8之外其他瀏覽器都沒有去請求url2(IE9請求了，但沒執行)，而且實驗發現IE6，7，8對動態修改src都會做請求執行處理。

最后，這個故事至少告訴我們：寫script標簽的時候千萬別手賤打回車。

參考文檔：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。