动态加载JavaScript文件

javascript file import include

126373 观看

24回复

15290 作者的声誉

如何可靠地动态加载JavaScript文件？这将用于实现一个模块或组件，当'初始化'时，组件将根据需要动态加载所有需要的JavaScript库脚本。

使用该组件的客户端不需要加载<script>实现此组件的所有库脚本文件（并手动将标记插入其网页） - 只需要“主”组件脚本文件。

主流JavaScript库如何实现这一点（Prototype，jQuery等）？ 这些工具是否将多个JavaScript文件合并为一个可再发行的“构建”版本的脚本文件？或者他们是否动态加载辅助“库”脚本？

这个问题的补充：有没有办法在加载动态包含的JavaScript文件后处理事件？ 原型document.observe适用于文档范围的事件。例：

document.observe("dom:loaded", function() {
  // initially hide all containers for tab content
  $$('div.tabcontent').invoke('hide');
});

脚本元素有哪些可用事件？

作者: Adam 的来源 发布者: 2008 年 8 月 21 日

回应 (24)

8像

15290 作者的声誉

以下是我发现的一些示例代码...有没有人有更好的方法？

  function include(url)
  {
    var s = document.createElement("script");
    s.setAttribute("type", "text/javascript");
    s.setAttribute("src", url);
    var nodes = document.getElementsByTagName("*");
    var node = nodes[nodes.length -1].parentNode;
    node.appendChild(s);
  }
作者: Adam 发布者: 21.08.2008 10:00

0像

62398 作者的声誉

所有主要的javascript库，如jscript，prototype，YUI都支持加载脚本文件。例如，在YUI中，加载核心后，您可以执行以下操作来加载日历控件

var loader = new YAHOO.util.YUILoader({

    require: ['calendar'], // what components?

    base: '../../build/',//where do they live?

    //filter: "DEBUG",  //use debug versions (or apply some
                        //some other filter?

    //loadOptional: true, //load all optional dependencies?

    //onSuccess is the function that YUI Loader
    //should call when all components are successfully loaded.
    onSuccess: function() {
        //Once the YUI Calendar Control and dependencies are on
        //the page, we'll verify that our target container is 
        //available in the DOM and then instantiate a default
        //calendar into it:
        YAHOO.util.Event.onAvailable("calendar_container", function() {
            var myCal = new YAHOO.widget.Calendar("mycal_id", "calendar_container");
            myCal.render();
        })
     },

    // should a failure occur, the onFailure function will be executed
    onFailure: function(o) {
        alert("error: " + YAHOO.lang.dump(o));
    }

 });

// Calculate the dependency and insert the required scripts and css resources
// into the document
loader.insert();
作者: Darren Kopp 发布者: 21.08.2008 10:01

20像

19083 作者的声誉

我做的基本上与你做亚当的事情相同，但稍加修改以确保我附加到head标签以完成工作。我只是创建了一个include函数（下面的代码）来处理脚本和css文件。

此函数还会检查以确保尚未动态加载脚本或CSS文件。它不检查手动编码值，并且可能有更好的方法来做到这一点，但它达到了目的。

function include( url, type ){
    // First make sure it hasn't been loaded by something else.
    if( Array.contains( includedFile, url ) )
        return;

    // Determine the MIME-type
    var jsExpr = new RegExp( "js$", "i" );
    var cssExpr = new RegExp( "css$", "i" );
    if( type == null )
        if( jsExpr.test( url ) )
            type = 'text/javascript';
        else if( cssExpr.test( url ) )
            type = 'text/css';

    // Create the appropriate element.
    var tag = null;
    switch( type ){
        case 'text/javascript' :
            tag = document.createElement( 'script' );
            tag.type = type;
            tag.src = url;
            break;
        case 'text/css' :
            tag = document.createElement( 'link' );
            tag.rel = 'stylesheet';
            tag.type = type;
            tag.href = url;
            break;
    }

    // Insert it to the <head> and the array to ensure it is not
    // loaded again.
    document.getElementsByTagName("head")[0].appendChild( tag );
    Array.add( includedFile, url );
}
作者: palehorse 发布者: 21.08.2008 10:06

3像

2552 作者的声誉

有没有人有更好的方法？

我认为只需将脚本添加到正文然后将其添加到页面的最后一个节点就更容易了。这个怎么样：

function include(url) {
  var s = document.createElement("script");
  s.setAttribute("type", "text/javascript");
  s.setAttribute("src", url);
  document.body.appendChild(s);
}
作者: Joseph Pecoraro 发布者: 21.08.2008 10:10

2像

22971 作者的声誉

我们在工作中使用的技术是使用AJAX请求请求javascript文件，然后使用eval（）返回。如果您正在使用原型库，则它们在Ajax.Request调用中支持此功能。

作者: 17 of 26 发布者: 21.08.2008 11:03

26像

26449 作者的声誉

我最近用jQuery使用了一个不那么复杂的版本：

<script src="scripts/jquery.js"></script>
<script>
  var js = ["scripts/jquery.dimensions.js", "scripts/shadedborder.js", "scripts/jqmodal.js", "scripts/main.js"];
  var $head = $("head");
  for (var i = 0; i < js.length; i++) {
    $head.append("<script src=\"" + js[i] + "\"></scr" + "ipt>");
  }
</script>

它在我测试的每个浏览器中都运行良好：IE6 / 7，Firefox，Safari，Opera。

更新： jQuery-less版本：

<script>
  var js = ["scripts/jquery.dimensions.js", "scripts/shadedborder.js", "scripts/jqmodal.js", "scripts/main.js"];
  for (var i = 0, l = js.length; i < l; i++) {
    document.getElementsByTagName("head")[0].innerHTML += ("<script src=\"" + js[i] + "\"></scr" + "ipt>");
  }
</script>
作者: travis 发布者: 23.08.2008 03:52

3像

6065 作者的声誉

我已经使用了我在网上找到的另一个解决方案...这个是在creativecommons下，它会在调用函数之前检查源是否包含在内 ...

你可以在这里找到这个文件：include.js

/** include - including .js files from JS - bfults@gmail.com - 2005-02-09
 ** Code licensed under Creative Commons Attribution-ShareAlike License 
 ** http://creativecommons.org/licenses/by-sa/2.0/
 **/              
var hIncludes = null;
function include(sURI)
{   
  if (document.getElementsByTagName)
  {   
    if (!hIncludes)
    {
      hIncludes = {}; 
      var cScripts = document.getElementsByTagName("script");
      for (var i=0,len=cScripts.length; i < len; i++)
        if (cScripts[i].src) hIncludes[cScripts[i].src] = true;
    }
    if (!hIncludes[sURI])
    {
      var oNew = document.createElement("script");
      oNew.type = "text/javascript";
      oNew.src = sURI;
      hIncludes[sURI]=true;
      document.getElementsByTagName("head")[0].appendChild(oNew);
    }
  }   
}
作者: Pierre Spring 发布者: 26.08.2008 02:50

77像

7201 作者的声誉

决定

您可以编写动态脚本标记（使用Prototype）：

new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"});

这里的问题是我们不知道外部脚本文件何时完全加载。

我们经常希望我们的依赖代码在下一行，并喜欢写下这样的东西： 

if (iNeedSomeMore) {
    Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod();
    myFancyMethod(); // cool, no need for callbacks!
}

有一种智能方法可以在不需要回调的情况下注入脚本依赖项。您只需通过同步AJAX请求拉出脚本并在全局级别上评估脚本。

如果使用Prototype，则Script.load方法如下所示：

var Script = {
    _loadedScripts: [],
    include: function(script) {
        // include script only once
        if (this._loadedScripts.include(script)) {
            return false;
        }
        // request file synchronous
        var code = new Ajax.Request(script, {
            asynchronous: false,
            method: "GET",
            evalJS: false,
            evalJSON: false
        }).transport.responseText;
        // eval code on global level
        if (Prototype.Browser.IE) {
            window.execScript(code);
        } else if (Prototype.Browser.WebKit) {
            $$("head").first().insert(Object.extend(
                new Element("script", {
                    type: "text/javascript"
                }), {
                    text: code
                }
            ));
        } else {
            window.eval(code);
        }
        // remember included script
        this._loadedScripts.push(script);
    }
};
作者: aemkei 发布者: 28.10.2008 09:02

3像

2275 作者的声誉

刚刚发现了YUI 3中的一个很棒的功能（在预览版中可用时）。您可以轻松地将依赖项插入YUI库和“外部”模块（您正在寻找的），而无需太多代码：YUI Loader。

它还会在加载外部模块后立即回答有关正在调用的函数的第二个问题。

例：

YUI({
    modules: {
        'simple': {
            fullpath: "http://example.com/public/js/simple.js"
        },
        'complicated': {
            fullpath: "http://example.com/public/js/complicated.js"
            requires: ['simple']  // <-- dependency to 'simple' module
        }
    },
    timeout: 10000
}).use('complicated', function(Y, result) {
    // called as soon as 'complicated' is loaded
    if (!result.success) {
        // loading failed, or timeout
        handleError(result.msg);
    } else {
        // call a function that needs 'complicated'
        doSomethingComplicated(...);
    }
});

完美地为我工作，并具有管理依赖关系的优势。有关YUI 2日历的示例，请参阅YUI文档。

作者: Kariem 发布者: 26.03.2009 12:14

2像

79 作者的声誉

jquery用它的.append（）函数解决了这个问题 - 用它来加载完整的jquery ui包

/*
 * FILENAME : project.library.js
 * USAGE    : loads any javascript library
 */
    var dirPath = "../js/";
    var library = ["functions.js","swfobject.js","jquery.jeditable.mini.js","jquery-ui-1.8.8.custom.min.js","ui/jquery.ui.core.min.js","ui/jquery.ui.widget.min.js","ui/jquery.ui.position.min.js","ui/jquery.ui.button.min.js","ui/jquery.ui.mouse.min.js","ui/jquery.ui.dialog.min.js","ui/jquery.effects.core.min.js","ui/jquery.effects.blind.min.js","ui/jquery.effects.fade.min.js","ui/jquery.effects.slide.min.js","ui/jquery.effects.transfer.min.js"];

    for(var script in library){
        $('head').append('<script type="text/javascript" src="' + dirPath + library[script] + '"></script>');
    }

要使用 - 在导入jquery.js之后在你的html / php / etc的头部，你只需要包含这样一个文件就可以加载到你的库的整个库中...

<script type="text/javascript" src="project.library.js"></script>
作者: JM Design 发布者: 14.01.2011 09:20

6像

11516 作者的声誉

如果你已经加载了jQuery，你应该使用$ .getScript。

这比其他答案有一个优势，因为你有一个内置的回调函数（以保证在依赖代码运行之前加载脚本），你可以控制缓存。

作者: Muhd 发布者: 13.02.2012 08:20

1像

1772 作者的声誉

有专门为此目的而设计的脚本。

yepnope.js内置于Modernizr中，而lab.js是一个更优化的版本（但用户友好版本较少）。

我不会建议通过像jquery或prototype这样的大型库来实现这一点 - 因为脚本加载器的一个主要好处是能够尽早加载脚本 - 你不必等到jquery和你所有的dom元素加载之前运行检查以查看是否要动态加载脚本。

作者: 1nfiniti 发布者: 13.02.2012 10:01

14像

9532 作者的声誉

另一个很棒的答案 

$.getScript("my_lovely_script.js", function(){


   alert("Script loaded and executed.");
  // here you can use anything you defined in the loaded script

 });

https://stackoverflow.com/a/950146/671046

作者: Naveed 发布者: 04.04.2012 03:07

55像

8592 作者的声誉

javascript中没有import / include / require，但有两种主要方法可以实现您的目标：

1 - 您可以使用AJAX调用加载它，然后使用eval。

这是最直接的方式，但由于Javascript安全设置，它仅限于您的域，并且使用eval可以打开错误和黑客的大门。

2 - 在HTML中添加带脚本URL的脚本标记。

绝对是最好的方式。您甚至可以从外部服务器加载脚本，并且在使用浏览器解析器评估代码时它是干净的。您可以将标记放在网页的头部或主体的底部。

这里讨论和说明了这两种解决方案。

现在，您必须了解一个大问题。这样做意味着您远程加载代码。现代Web浏览器将加载文件并继续执行当前脚本，因为它们异步加载所有内容以提高性能。

这意味着如果你直接使用这些技巧，在你要求加载后，你将无法在下一行使用新加载的代码，因为它仍然会加载。

EG：my_lovely_script.js包含MySuperObject

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

然后你重新加载页面击中F5。它的工作原理！混乱...

那该怎么办呢？

好吧，你可以在我给你的链接中使用作者建议的黑客。总之，对于匆忙的人，他在加载脚本时使用en事件来运行回调函数。因此，您可以使用远程库将所有代码放在回调函数中。EG：

function loadScript(url, callback)
{
    // adding the script tag to the head as suggested before
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;

   // then bind the event to the callback function 
   // there are several events for cross browser compatibility
   script.onreadystatechange = callback;
   script.onload = callback;

   // fire the loading
   head.appendChild(script);
}

然后在lambda函数中加载脚本后编写要使用的代码：

var myPrettyCode = function() {
    // here, do what ever you want
};

然后你运行所有：

loadScript("my_lovely_script.js", myPrettyCode);

好，我知道了。但写这些东西真是太痛苦了。

那么，在这种情况下，你可以像往常一样使用梦幻般的免费jQuery框架，它让你在一行中做同样的事情：

$.getScript("my_lovely_script.js", function() {
    alert("Script loaded and executed.");
    // here you can use anything you defined in the loaded script
});
作者: Dhaval Shah 发布者: 09.02.2013 09:37

1像

999 作者的声誉

我编写了一个简单的模块，可以自动执行在JavaScript中导入/包含模块脚本的工作。试一试，请多给一些反馈！:)有关代码的详细说明，请参阅此博客文章：http：//stamat.wordpress.com/2013/04/12/javascript-require-import-include-modules/

var _rmod = _rmod || {}; //require module namespace
_rmod.on_ready_fn_stack = [];
_rmod.libpath = '';
_rmod.imported = {};
_rmod.loading = {
    scripts: {},
    length: 0
};

_rmod.findScriptPath = function(script_name) {
    var script_elems = document.getElementsByTagName('script');
    for (var i = 0; i < script_elems.length; i++) {
        if (script_elems[i].src.endsWith(script_name)) {
            var href = window.location.href;
            href = href.substring(0, href.lastIndexOf('/'));
            var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length);
            return url.substring(href.length+1, url.length);
        }
    }
    return '';
};

_rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark the root directory of your library, any library


_rmod.injectScript = function(script_name, uri, callback, prepare) {

    if(!prepare)
        prepare(script_name, uri);

    var script_elem = document.createElement('script');
    script_elem.type = 'text/javascript';
    script_elem.title = script_name;
    script_elem.src = uri;
    script_elem.async = true;
    script_elem.defer = false;

    if(!callback)
        script_elem.onload = function() {
            callback(script_name, uri);
        };

    document.getElementsByTagName('head')[0].appendChild(script_elem);
};

_rmod.requirePrepare = function(script_name, uri) {
    _rmod.loading.scripts[script_name] = uri;
    _rmod.loading.length++;
};

_rmod.requireCallback = function(script_name, uri) {
    _rmod.loading.length--;
    delete _rmod.loading.scripts[script_name];
    _rmod.imported[script_name] = uri;

    if(_rmod.loading.length == 0)
        _rmod.onReady();
};

_rmod.onReady = function() {
    if (!_rmod.LOADED) {
        for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){
            _rmod.on_ready_fn_stack[i]();
        });
        _rmod.LOADED = true;
    }
};

//you can rename based on your liking. I chose require, but it can be called include or anything else that is easy for you to remember or write, except import because it is reserved for future use.
var require = function(script_name) {
    var np = script_name.split('.');
    if (np[np.length-1] === '*') {
        np.pop();
        np.push('_all');
    }

    script_name = np.join('.');
    var uri = _rmod.libpath + np.join('/')+'.js';
    if (!_rmod.loading.scripts.hasOwnProperty(script_name) 
     && !_rmod.imported.hasOwnProperty(script_name)) {
        _rmod.injectScript(script_name, uri, 
            _rmod.requireCallback, 
                _rmod.requirePrepare);
    }
};

var ready = function(fn) {
    _rmod.on_ready_fn_stack.push(fn);
};

// ----- USAGE -----

require('ivar.util.array');
require('ivar.util.string');
require('ivar.net.*');

ready(function(){
    //do something when required scripts are loaded
});
作者: stamat 发布者: 12.04.2013 04:55

3像

613 作者的声誉

如果要加载SYNC脚本，则需要将脚本文本直接添加到HTML HEAD标记。添加它将触发ASYNC加载。要同步从外部文件加载脚本文本，请使用XHR。下面是一个快速示例（它正在使用此帖和其他帖子中的其他部分答案）：

/*sample requires an additional method for array prototype:*/

if (Array.prototype.contains === undefined) {
Array.prototype.contains = function (obj) {
    var i = this.length;
    while (i--) { if (this[i] === obj) return true; }
    return false;
};
};

/*define object that will wrap our logic*/
var ScriptLoader = {
LoadedFiles: [],

LoadFile: function (url) {
    var self = this;
    if (this.LoadedFiles.contains(url)) return;

    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                self.LoadedFiles.push(url);
                self.AddScript(xhr.responseText);
            } else {
                if (console) console.error(xhr.statusText);
            }
        }
    };
    xhr.open("GET", url, false);/*last parameter defines if call is async or not*/
    xhr.send(null);
},

AddScript: function (code) {
    var oNew = document.createElement("script");
    oNew.type = "text/javascript";
    oNew.textContent = code;
    document.getElementsByTagName("head")[0].appendChild(oNew);
}
};

/*Load script file. ScriptLoader will check if you try to load a file that has already been loaded (this check might be better, but I'm lazy).*/

ScriptLoader.LoadFile("Scripts/jquery-2.0.1.min.js");
ScriptLoader.LoadFile("Scripts/jquery-2.0.1.min.js");
/*this will be executed right after upper lines. It requires jquery to execute. It requires a HTML input with id "tb1"*/
$(function () { alert($('#tb1').val()); });
作者: Sielu 发布者: 06.06.2013 06:55

2像

7018 作者的声誉

保持简洁，简洁，可维护！：]

// 3rd party plugins / script (don't forget the full path is necessary)
var FULL_PATH = '', s =
[
    FULL_PATH + 'plugins/script.js'      // Script example
    FULL_PATH + 'plugins/jquery.1.2.js', // jQuery Library 
    FULL_PATH + 'plugins/crypto-js/hmac-sha1.js',      // CryptoJS
    FULL_PATH + 'plugins/crypto-js/enc-base64-min.js'  // CryptoJS
];

function load(url)
{
    var ajax = new XMLHttpRequest();
    ajax.open('GET', url, false);
    ajax.onreadystatechange = function ()
    {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4)
        {
            switch(ajax.status)
            {
                case 200:
                    eval.apply( window, [script] );
                    console.log("library loaded: ", url);
                    break;
                default:
                    console.log("ERROR: library not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

 // initialize a single load 
load('plugins/script.js');

// initialize a full load of scripts
if (s.length > 0)
{
    for (i = 0; i < s.length; i++)
    {
        load(s[i]);
    }
}

此代码只是一个简短的功能示例，可能需要额外的功能，以便在任何（或给定）平台上提供全面支持。

作者: tfont 发布者: 08.02.2015 01:16

1像

2132 作者的声誉

我迷失在所有这些样本中，但今天我需要从我的主.js加载外部.js，我这样做了：

document.write("<script src='https://www.google.com/recaptcha/api.js'></script>");
作者: adrianTNT 发布者: 04.03.2016 10:08

1像

1957 作者的声誉

这是一个简单的回调和IE支持：

function loadScript(url, callback) {

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function () {
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {

     //jQuery loaded
     console.log('jquery loaded');

});
作者: Jacob 发布者: 08.03.2017 09:40

0像

2630 作者的声誉

我知道我对这个问题的答案有点迟了，但是，这是www.html5rocks.com上的一篇很棒的文章- 深入探讨了脚本加载的浑水。

在该文章中得出的结论是，在浏览器支持方面，动态加载JavaScript文件而不阻止内容呈现的最佳方法是以下方式：

考虑到你有四个命名的脚本，script1.js, script2.js, script3.js, script4.js你可以通过应用async = false来做到这一点：

[
  'script1.js',
  'script2.js',
  'script3.js',
  'script4.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

现在，Spec说：一起下载，所有下载后立即执行。

Firefox <3.6，Opera说：我不知道这个“异步”的东西是什么，但事实上，我按照添加的顺序执行通过JS添加的脚本。

Safari 5.0说：我理解“异步”，但不明白用JS将其设置为“false”。我会在他们降落后立即以任何顺序执行你的脚本。

IE <10说：不知道“异步”，但有一个使用“onreadystatechange”的解决方法。

其他一切都说：我是你的朋友，我们打算用这本书来做。

现在，IE <10的完整代码解决方法： 

var scripts = [
  'script1.js',
  'script2.js',
  'script3.js',
  'script4.js'
];
var src;
var script;
var pendingScripts = [];
var firstScript = document.scripts[0];

// Watch scripts load in IE
function stateChange() {
  // Execute as many scripts in order as we can
  var pendingScript;
  while (pendingScripts[0] && pendingScripts[0].readyState == 'loaded') {
    pendingScript = pendingScripts.shift();
    // avoid future loading events from this script (eg, if src changes)
    pendingScript.onreadystatechange = null;
    // can't just appendChild, old IE bug if element isn't closed
    firstScript.parentNode.insertBefore(pendingScript, firstScript);
  }
}

// loop through our script urls
while (src = scripts.shift()) {
  if ('async' in firstScript) { // modern browsers
    script = document.createElement('script');
    script.async = false;
    script.src = src;
    document.head.appendChild(script);
  }
  else if (firstScript.readyState) { // IE<10
    // create a script and add it to our todo pile
    script = document.createElement('script');
    pendingScripts.push(script);
    // listen for state changes
    script.onreadystatechange = stateChange;
    // must set src AFTER adding onreadystatechange listener
    // else we’ll miss the loaded event for cached scripts
    script.src = src;
  }
  else { // fall back to defer
    document.write('<script src="' + src + '" defer></'+'script>');
  }
}

稍后一些技巧和缩小，它是362字节 

!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",[
  "//other-domain.com/1.js",
  "2.js"
])
作者: asmmahmud 发布者: 03.08.2017 03:42

0像

175 作者的声誉

像这样......

<script>
     $(document).ready(function() {
          $('body').append('<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=getCurrentPickupLocation" async defer><\/script>');
     });
</script>
作者: James Arnold 发布者: 18.04.2018 01:22

1像

4713 作者的声誉

这是一个加载JS文件的函数的简单示例。相关要点：

  • 你不需要jQuery，所以你最初可以使用它来加载jQuery.js文件
  • 它与回调异步
  • 它确保它只加载一次，因为它保持一个带有加载URL记录的机箱，从而避免使用网络
  • 与jQuery相反，$.ajax或者$.getScript您可以使用nonce，从而解决CSP问题unsafe-inline。只需使用该物业script.nonce
var getScriptOnce = function() {

    var scriptArray = []; //array of urls (closure)

    //function to defer loading of script
    return function (url, callback){
        //the array doesn't have such url
        if (scriptArray.indexOf(url) === -1){

            var script=document.createElement('script');
            script.src=url;
            var head=document.getElementsByTagName('head')[0],
                done=false;

            script.onload=script.onreadystatechange = function(){
                if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
                    done=true;
                    if (typeof callback === 'function') {
                        callback();
                    }
                    script.onload = script.onreadystatechange = null;
                    head.removeChild(script);

                    scriptArray.push(url);
                }
            };

            head.appendChild(script);
        }
    };
}();

现在你只需使用它

getScriptOnce("url_of_your_JS_file.js");
作者: João Pimentel Ferreira 发布者: 26.04.2018 08:54

3像

13399 作者的声誉

有一个新的ECMA标准称为动态导入，最近已合并到Chrome和Safari中。 

const moduleSpecifier = './dir/someModule.js';

import(moduleSpecifier)
   .then(someModule => someModule.foo()); // executes foo method in someModule
作者: Alister 发布者: 17.07.2018 09:57

1像

0 作者的声誉

一个荒谬的单行，对于那些认为加载js库的人不应该使用多行代码：P

await new Promise((resolve, reject) => {let js = document.createElement("script"); js.src="mylibrary.js"; js.onload=resolve; js.onerror=reject; document.body.appendChild(js)});

显然，如果要导入的脚本是模块，则可以使用该import(...)功能。

作者: user993683 发布者: 17.09.2018 10:10
32x32