2011-04-26 154 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函数应该利用缓存。