动态加载JavaScript文件
你怎么能可靠地和动态加载JavaScript文件？这可以用来实现一个模块或组件，当“初始化”组件时，会根据需要动态加载所有需要的JavaScript库脚本。动态加载JavaScript文件
使用该组件的客户端不需要加载实现此组件的所有库脚本文件（并手动将<script>标记插入到其网页中） - 只是“主要”组件脚本文件。
如何主流JavaScript库做到这一点（原型，jQuery的，等等）？这些工具是否将多个JavaScript文件合并到脚本文件的单个可再发行版本“构建版本”中？或者他们是否动态加载辅助“图书馆”脚本？
的除了这个问题：有没有办法来处理该事件后动态包含的JavaScript文件被加载？原型document.observe宽文档事件。示例：
document.observe("dom:loaded", function() {
// initially hide all containers for tab content
$$('div.tabcontent').invoke('hide');
});
脚本元素的可用事件是什么？
您可以（使用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请求来拉动脚本，并在全局级别上评估该脚本。
如果使用原型的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);
}
};
下面是一些示例代码，我发现......没有任何人有更好的办法？
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);
}
我能做些什么来克服它为跨领域工作吗？ *（从http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStu ff/userjs/aagmfunctions.js`加载脚本）* – user2284570 2014-09-14 02:32:28
所有主要的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();
你可以看看在链接：[answer]（https://stackoverflow.com/questions/40808425/how-load-and-use-dynamically-javascript/45489130#45489130） – asmmahmud 2017-08-03 15:59:07
我也基本上是你做了亚当同样的事情，但有一个滑动的修改，以确保我被追加到头标签完成工作。我只是创建了一个包含函数（下面的代码）来处理脚本和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);
}
没有任何人有更好的办法？
我认为只要将脚本添加到主体中，将其添加到页面上的最后一个节点会更容易。这怎么样：
function include(url) {
var s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", url);
document.body.appendChild(s);
}
我能做些什么来让它在跨域中工作？ *（从http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStu ff/userjs/aagmfunctions.js`加载脚本）* – user2284570 2014-09-14 02:34:36
我们在工作中使用的技术是要求JavaScript文件使用AJAX请求，然后eval（）返回。如果你使用的是原型库，他们在Ajax.Request调用中支持这个功能。
我用了一个much less complicated version recently与jQuery：IE6/7，Firefox和Safari，歌剧：
<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>
它在每一个我测试了它的浏览器伟大的工作。
更新： jQuery的版本少：
<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>
我用另一种解决方案，我在网上发现了......这个人是在创用CC，它检查源被列入前在调用函数 ...
，你可以在这里找到该文件：include.js
/** include - including .js files from JS - [email protected] - 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);
}
}
}
在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(...);
}
});
完美工作对我来说，有管理的依赖的优势。有关example with YUI 2 calendar的信息，请参阅YUI文档。
的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>');
}
要使用 - 在你的HTML/PHP的头/等你导入的jquery.js后，你会仅仅只包含这一个文件像这样在你的库追加到头部的整体加载...
<script type="text/javascript" src="project.library.js"></script>
有一些脚本是专门为此目的而设计的。
yepnope.js内置Modernizr的，并且lab.js是更优化的（但不太用户友好的版本
我不会reccomend通过像jQuery或原型大的一个图书馆这样做 - 因为主要好处之一脚本加载器是早期加载脚本的能力 - 你不应该有，直到jQuery的&运行的检查，看是否要动态加载脚本之前，所有的DOM元素加载等待
另一个真棒答案
。$.getScript("my_lovely_script.js", function(){
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});
没有进口/包括/需要在JavaScript中，但也有实现你想要的方式主要有两种：
1 - 你可以用AJAX调用加载它，然后使用eval。
这是最直接的方式，但由于Javascript的安全设置，它仅限于您的域名，并且使用eval打开了错误和黑客的大门。
2 - 在HTML中添加脚本标签和脚本URL。
绝对是最好的选择。您甚至可以从外部服务器加载脚本，并且在使用浏览器分析程序评估代码时它很干净。您可以将标签放在网页的头部或身体的底部。
这两个解决方案在这里讨论和说明。
现在，有一个大问题，你必须知道。这样做意味着您可以远程加载代码。现代Web浏览器将加载文件并继续执行当前脚本，因为它们会异步加载所有内容以提高性能。
这意味着如果您直接使用这些技巧，则在您要求将其加载后，您将无法在下一行使用新加载的代码，因为它仍将加载。
E.G：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事件来运行回调函数。所以你可以把所有使用远程库的代码放在回调函数中。 E.G：
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
});
我写了一个简单的模块，automatizes的工作在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
});
如果你想有一个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()); });
保持它的美好，简洁和易于维护！ ：]
// 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]);
}
}
此代码仅仅是所能需要对任何充分支持（或给定的）平台附加特征功能性的简短功能例。
我失去了所有的这些样品中，但今天我需要从我的主要的.js加载一个外部的.js和我这样做：
document.write("<script src='https://www.google.com/recaptcha/api.js'></script>");
Here是一个简单的回呼和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');
});
我知道我的答案是有点晚了这个问题，但是，这里是www.html5rocks.com一个伟大的文章 - Deep dive into the murky waters of script loading。
在这篇文章中可以得出结论，在浏览器支持方面，最好的办法动态加载的JavaScript文件，不会禁止内容渲染方式如下：
考虑你四个剧本，名为script1.js, script2.js, script3.js, script4.js那么你可以做它应用异步=假：
[
'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);
});
现在，规格说：下载一起，尽快为了执行所有下载。
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"
])
可能重复[如何包括JavaScript文件在另一个JavaScript文件？]（http://stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file） – bjb568 2014-08-19 13:10:06