jQuery getScript() 与 document.createElement('script')答案

【问题标题】：jQuery getScript() vs document.createElement('script')jQuery getScript() 与 document.createElement('script')
【发布时间】：2011-08-13 01:45:31
【问题描述】：

假设这两种方法都正确加载了脚本，并且我在使用脚本（和/或使用回调）之前等待了适当的时间，那么这些方法之间的主要区别是什么。

注意：我了解第一次使用 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);
}

【问题讨论】：

纯javascript有没有办法检测脚本何时加载？我的意思是jQuery.getScript() 函数有一个回调...... javascript 中有类似的东西吗？
哦，我只是想了一下...也许<script onload="myScriptCallback()" src="/pathtoscript.js"></script>？小伙伴们怎么看？
也很想知道这一点...

标签： javascript jquery dynamic-loading

【解决方案1】：

jQuery 将script 元素附加到head（如果存在），否则附加到document 元素。在引擎盖下the code is similar。最终结果将是相同的：两种方法都在全局范围内执行新代码。

【讨论】：

谢谢，我的文档将有一个head，这就是 jQuery 将附加的地方。那么问题就变成了将代码附加到head 和body 之间是否有区别，就像我中间的例子一样？
jQuery 仅在脚本从远程域加载时附加

【解决方案2】：

Jquery 方法的文档说：

使用 GET HTTP 请求从服务器加载一个 JavaScript 文件，然后执行它。

这意味着加载成功后会直接调用导入的javascript。

附加到头部：表示浏览器将script-tag作为最后一个子元素添加并执行内容（如果在head标签末尾手动添加标签也是如此）。附加到正文：这意味着浏览器将脚本标签添加为正文标签的最后一个子标签并执行该内容（如果您在正文标签的末尾手动添加标签，则相同）。

【讨论】：

【解决方案3】：

值得一提的是，jQuery 的getScript 函数默认禁用缓存，这意味着浏览器会在每次请求页面时下载脚本（参见上一个答案here）。另一方面，您的 loadScript 函数应该利用缓存。

【讨论】：