在页面中动态添加 javascript 文件的方法答案

【问题标题】：Ways to add javascript files dynamically in a page在页面中动态添加 javascript 文件的方法
【发布时间】：2011-08-10 17:34:30
【问题描述】：

我已经看到 Scriptaculous.js 文件动态包含其所需的 javascript 文件。有没有更好的方法来动态包含 javascript。

例如，我想包含我的 js 文件，例如，

<script src="single.js?files=first.js,second.js,third.js..."></script>

我怎样才能有效地做到这一点？

【问题讨论】：

为什么要投反对票？有什么问题？
@Hoque - 它看起来就像有人正在浏览问题页面并否决所有内容；连续至少有 5 个问题为 -1 或更低。我猜版主可以验证这一点...
同意，我也很好奇发生了什么。似乎有些垃圾邮件发送者正在玩得开心。所以... +1 来补偿。
我想知道这里有三个arswers，但我只得到两个。发生了什么事？
@Hoque - 一个是垃圾邮件并被删除。我相信答案计数已缓存或可能仅包括已删除的答案（即错误）。

标签： javascript jquery prototypejs scriptaculous

【解决方案1】：

动态加载 .js 或 .css 文件，简而言之，这意味着使用 DOM 方法首先创建一个时髦的新“SCRIPT”或“LINK”元素，为其分配适当的属性，最后使用元素。 appendChild() 将元素添加到文档树中的所需位置。这听起来比实际上要花哨得多。让我们看看这一切是如何结合在一起的：

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

我希望它的使用充分

【讨论】：

非常感谢您的努力。这就像一个一个添加脚本。
浏览器支持什么？
你需要添加 document.body.appendChild(fileref);使其在浏览器中工作
请注意文件可能不会按照您调用它们的确切顺序加载（和运行）。
document.getElementsByTagName("head")[0].appendChild(fileref) 如果您有一些 document.ready() 内联工作，则无法正常工作。 $("head").append(fileref); 对我很有用，虽然它需要 jquery.min.js 内联引用。

【解决方案2】：

您可以使用 jQuery.getScript() 函数...我认为包含 JavaScript .js 文件会更容易。

Here 是参考。

【讨论】：

我认为这就是我要用于 SO 上的所有链接的文本。

【解决方案3】：

在advice of Salaman A's comments 之后，我发现了 Google 现在如何使用 Analytics：https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

这是相同代码的更通用版本：

(function() {
    var s = document.createElement('script'); // Create a script element
    s.type = "text/javascript";               // optional in html5
    s.async = true;                           // asynchronous? true/false
    s.src = "//example.com/your_script.js"; 
    var fs = document.getElementsByTagName('script')[0];  // Get the first script
    fs.parentNode.insertBefore(s, fs);
})();

【讨论】：

【解决方案4】：

编辑：不要使用这种方法 - 我十年前写了这个答案！

把它留在这里纯粹是为了后代。

有很多不同的方式，但谷歌加载额外脚本的方式是这样的：

function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
}

这是直接从谷歌地图加载器获取的。

直接将脚本标签写入文档是最简单最有效的方式。

【讨论】：

Google 本身不再推荐它 :) 例如，他们改变了向网站添加谷歌分析代码的推荐方式。
您能否提供一个链接来备份它，因为所有 google 的 api 都以这种方式加载，即使是 code.google.com/apis/loader
你去吧：Using the Traditional Snippet。请阅读说明我们建议您使用默认跟踪代码 sn-p 的介绍性段落，如跟踪站点中所述。旧版脚本（更准确地说是脚本加载器）使用document.write，更新后的脚本使用document.createElement。这是另一个有趣的阅读：Avoid document.write
有趣的阅读。只有当您以这种方式异步加载脚本时，您才能真正受益，如果您使用回调，这很好。我想这取决于您是否需要按窗帘顺序加载脚本。
LOL 感谢您在回答后 3 1/2 年的反对票 - 不出所料，自从我写下这个答案以来，事情已经发生了变化。

【解决方案5】：

动态添加新的 javascript 文件：

function includeJS(jsFile) {
    $('head').append($('<script>').attr('type', 'text/javascript').attr('src', jsFile));
}


// Pick a JS to load
if ($.browser.msie) {
    includeJS('first.js');
} else {
    includeJS('second.js');
}
includeJS('third.js');

【讨论】：

如果你已经加载了 jQuery，只需使用 jQuery.getScript()。

【解决方案6】：

我已经看到了 scriptaculous 加载器的作用。它的作用是遍历文档中的所有脚本标签以找到自己加载的标签，例如：

<script src="/path/to/single.js?files=first.js,second.js,third.js"></script>

然后它解析 src 属性中使用的查询字符串，并为每个脚本文件动态创建附加的脚本标签。同时它还解析基础脚本的路径（/path/to/single.js），并使用相同的路径加载依赖文件（例如/path/to/first.js）。

您可以像这样创建自己的脚本加载器。在 vanilla javascript 中，您可以使用以下函数：

getElementsByTagName -- 查找所有脚本
getAttribute -- 查找 src/href/type 属性
createElement -- 创建脚本元素
appendChild -- 附加到头部/主体

Anand Thangappan 发布了一个使用这些功能的解决方案。如果您使用的是 jQuery 或 MooTools 等框架，那么它们都提供了自己的动态加载 JsvaScript 实现。

最后，有一个服务器端解决方案可以解决您的问题。查看minify -- 将多个 CSS 或 JavaScript 文件合并并缩小到一个下载中。

【讨论】：

【解决方案7】：

document.getElementsByTagName("head")[0].appendChild(fileref‌) 不工作，如果你有一些 document.ready() 内联工作。 $("head").append(fileref); 非常适合我，虽然它需要 jquery.min.js 内联引用。

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <script src="script/jquery.min.js"></script>
    <script src="script/master_load.js"></script>
    <script>
        load_master_css();
        load_master_js();
    </script>
</head>

和master_load.js：

function loadjscssfile(filename) {
    if (filename.substr(filename.length - 4) == ".css") { // 'endsWith' is not IE supported.
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("href", filename)
        //fileref.setAttribute("type", "text/css")
    }
    else if (filename.substr(filename.length - 3) == ".js") {
        var fileref = document.createElement('script')
        fileref.setAttribute("src", filename)
        //fileref.setAttribute("type", "text/javascript")
    }
    $("head").append(fileref);
}
function load_master_css() {
    loadjscssfile("css/bootstrap.min.css");
    // bunch of css files
}
function load_master_js() {
    loadjscssfile("script/bootstrap.min.js");
    // bunch of js files
}

【讨论】：

【解决方案8】：

我们可以快速扩展它，以便在添加脚本后执行回调。

function loadjscssfile(filename, filetype, callback){
    if (typeof fileref!="undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref);
        callback();
    }
}

【讨论】：

我怀疑这根本行不通...您传递了您不使用的 filename 和 filetype 并使用了您未声明的 fileref...
对不起，我的评论参考了上面 Anand Thangappan 的回答。我虽然对此发表了评论，而不是新的答案。

【解决方案9】：

创建脚本标签，设置 URL，将其添加到文档中：

let script = document.createElement("script");
script.src = "https://example.com/your_script.js"; 
document.body.appendChild(script);

就是这样。对于如此简单的任务，此页面上有太多过于复杂的答案。

如果您使用的是现代 JavaScript，则可以使用像 await import(...) 这样的语法的动态导入。这超出了此答案的范围，但您可以阅读更多关于 here 的信息。

【讨论】：