2011-04-26 158 views
8

假設這兩種方法都正確加載腳本,並且在使用腳本(和/或使用回調)之前等待適當的時間,是這些方法之間的主要區別。jQuery getScript()vs document.createElement('script')

注:我明白第一次使用jQuery(這是一個更大的下載等)。我真正感興趣的是這些方法的後續影響。有人將腳本放在與另一個不同的範圍內嗎?等

的jQuery:

function loadScript() { 
    $.getScript('http://www.mydomain/myscript.js'); 
} 

追加到體:

function loadScript() { 
    var script= document.createElement('script'); 
    script.type= 'text/javascript'; 
    script.src= 'http://www.mydomain/myscript.js'; 
    script.async = true; 
    document.body.appendChild(script); 
} 

追加到頭部:

function loadScript() { 
    var head= document.getElementsByTagName('head')[0]; 
    var script= document.createElement('script'); 
    script.type= 'text/javascript'; 
    script.src= 'http://www.mydomain/myscript.js'; 
    script.async = true; 
    head.appendChild(script); 
} 
+1

有沒有一種方法在純JavaScript檢測何時加載腳本?我的意思是'jQuery.getScript()'函數有一個回調...是否有類似的JavaScript? – 2016-08-30 09:35:46

+0

哦,我只是想了一下...也許''?你認爲什麼人? – 2016-08-30 09:40:21

+0

也想知道這個以及... – 2017-07-13 06:08:40

回答

3

jQuery的所述script元件附加到head如果存在的話,或給document元素herwise。引擎蓋下the code is similar。最終結果將是相同的:這兩種方法在全局範圍內執行新代碼。

+0

謝謝,我的文檔將有一個'head',這樣jQuery將追加。那麼問題就變成了,像我的中間例子那樣,將代碼附加到'head'和'body'之間有什麼區別? – bebeastie 2011-04-26 14:35:52

+13

如果腳本是從遠程域加載的(例如'http:// someothersite.com/script.js'),則jQuery僅附加

1

的文檔以Jquery的方法表示:

負載從使用HTTP GET請求的服務器的JavaScript文件,然後執行它。

這意味着導入的JavaScript將在成功加載後被straigt調用。

追加到了頭:這意味着瀏覽器添加腳本標籤的最後一個子和執行內容(這是相同的,如果你在head標籤結束manuelly添加標籤)。 附加到身體:這意味着瀏覽器將腳本標記添加爲身體標記的最後一個孩子並執行該內容(如果您在身體標記的末尾添加manuelly標記,則是相同的)。

0

值得一提的是,jQuery的getScript函數默認禁用緩存,這意味着瀏覽器每次請求頁面時都會下載腳本(請參閱前面的回答here)。另一方面,您的loadScript函數應該利用緩存。