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

Ways to add javascript files dynamically in a page

本文关键字：javascript 文件 方法 添加 动态      更新时间：2023-09-26

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

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

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

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

动态加载.js或.css文件，简而言之，这意味着使用DOM方法首先创建一个时髦的新"SCRIPT"或"LINK"元素，为其分配适当的属性，最后使用element. 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

我希望它的用途充分

您可以使用jQuery.getScript()函数…我认为这将更容易与您包含一个JavaScript .js文件。

根据Salaman A的评论建议，我发现了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);
})();
编辑:不要用这种方法——我十年前就写了这个答案!

留给后人。

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

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

直接取自Google地图加载器

直接给文档写一个脚本标签是最简单也是最有效的方法。

创建一个script标签，设置URL，添加到文档中:

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

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

如果你使用的是现代JavaScript，你可以使用像await import(...)这样的语法来动态导入。这超出了这个答案的范围，但是你可以在这里了解更多。

动态添加新的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');

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

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

然后解析src属性中使用的querystring，并动态地为每个脚本文件创建额外的脚本标记。同时，它还解析基本脚本(/path/to/single.js)的路径，并使用相同的路径加载依赖文件(例如/path/to/first.js)。

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

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

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

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

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>

and 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
}

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

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