动态加载javascript文件

Dynamically load a JavaScript file

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

使用该组件的客户机不需要加载实现该组件的所有库脚本文件(并手动将标记插入其网页中)，只需加载"主"组件脚本文件即可。

主流的JavaScript库是如何实现这一点的(原型、jquery等)？这些工具是否将多个javascript文件合并到脚本文件的单个可再发行的"构建"版本中？或者他们会动态加载辅助的"库"脚本吗？

这个问题的一个补充：在加载动态包含的javascript文件之后，是否有方法处理事件？原型具有用于文档范围事件的document.observe。例子：

1
2
3
4

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

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

相关讨论

您可以编写动态脚本标记(使用原型)：

1
2
3
4
5
6
7
8
9
10
11

new Element("script", {src:"myBigCodeLibrary.js", type:"text/javascript
<div class="suo-content">[collapse title=""]<ul><li>我该怎么做才能让它在跨域中工作？(从<wyn>http://web.archive.org/web/20140905044059/http://www.howtocr&zwnj;eate.co.uk/operaStu?&zwnj;?ff/userjs/aagmfunct&zwnj;ions.js</wyn>加载脚本)</li><li>@用户2284570 cors stackoverflow.com/questions/5750696/&hellip；</li><li>@我不控制cx1〔5〕。</li><li>然后你必须使用其他程序来获取你想要访问的数据，并提供给你自己。</li></ul>[/collapse]</div><hr><P>javascript中没有导入/包含/要求，但有两种主要方法可以实现您想要的功能：</P><P>1-您可以使用Ajax调用加载它，然后使用eval。</P><P>这是最简单的方法，但由于javascript的安全设置，它仅限于您的域，并且使用eval打开了bug和黑客的大门。</P><P>2-在HTML中添加带有脚本URL的脚本标记。</P><P>绝对是最好的方式。您甚至可以从外部服务器加载脚本，并且在使用浏览器解析器评估代码时它是干净的。您可以将标签放在网页的头部或正文的底部。</P><P>这两个解决方案都在这里讨论和说明。</P><P>现在，有一个大问题你必须知道。这样做意味着远程加载代码。现代Web浏览器将加载文件并继续执行当前脚本，因为它们异步加载所有内容以提高性能。</P><P>这意味着，如果您直接使用这些技巧，那么在请求加载下一行代码之后，您将无法使用新加载的代码，因为它仍将被加载。</P><P>我可爱的脚本包含我的主题</P>[cc lang="javascript"]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 event来运行回调函数。所以您可以将使用远程库的所有代码放入回调函数中。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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函数中加载脚本后要使用的代码：

1
2
3

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

然后你运行所有这些：

1	loadScript("my_lovely_script.js", myPrettyCode);

好的，我明白了。但是写这些东西真的很痛苦。

好吧，在这种情况下，您可以一如既往地使用出色的免费jquery框架，它允许您在一行中执行相同的操作：

1
2
3
4

$.getScript("my_lovely_script.js", function() {
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});

相关讨论

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

1
2
3
4
5
6
7

它在我测试过的每一款浏览器中都很管用：IE6/7、火狐、Safari、Opera。

更新：jquery-less版本：

1
2
3
4

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>");
}

相关讨论

我做了和你做亚当基本相同的事情，但是做了一个小小的修改，以确保我是附加在头标签上完成这项工作。我只是创建了一个include函数(下面的代码)来处理脚本和CSS文件。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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 );
}

相关讨论

另一个很棒的答案

1
2
3
4
5
6
7

$.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/950446/671046

相关讨论

以下是我找到的一些示例代码…有人有更好的方法吗？

1
2
3
4
5
6
7
8
9

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);
}

相关讨论

如果已经加载了jquery，则应使用$.GetScript。

这比这里的其他答案有一个优势，因为您有一个内置的回调函数(以确保在依赖代码运行之前加载脚本)，并且您可以控制缓存。

Just found out about a great feature in YUI 3 (at the time of writing available in preview release). You can easily insert dependencies to YUI libraries and to"external" modules (what you are looking for) without too much code: YUI Loader.

It also answers your second question regarding the function being called as soon as the external module is loaded.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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文档以了解yui 2日历的示例。

相关讨论

如果要加载同步脚本，则需要将脚本文本直接添加到HTML头标记中。添加它将触发异步加载。要同步从外部文件加载脚本文本，请使用xhr。下面是一个快速的示例(它在本帖和其他帖中使用了部分其他答案)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/*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()); });

does anyone have a better way?

我认为将脚本添加到主体中比将其添加到页面上的最后一个节点要容易得多。这个怎么样？

1
2
3
4
5
6

function include(url) {
var s = document.createElement("script");
s.setAttribute("type","text/javascript");
s.setAttribute("src", url);
document.body.appendChild(s);
}

相关讨论

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/** 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);
}
}
}

相关讨论

有一个新的提议的ECMA标准称为动态导入，最近被纳入到Chrome和Safari中。

1
2
3
4

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

import(moduleSpecifier)
.then(someModule => someModule.foo()); // executes foo method in someModule

我们在工作中使用的技术是使用Ajax请求请求javascript文件，然后eval()返回。如果您使用的是原型库，那么它们在其ajax.request调用中支持此功能。

jquery用它的.append()函数为我解决了这个问题。-用于加载完整的jquery UI包

1
2
3
4
5
6
7
8
9
10

/*
* 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] + '">');
}

在导入jquery.js之后，在html/php/etc的头部使用-只需包含这样一个文件，以便加载整个库，并将其附加到头部…

1	<script type="text/javascript" src="project.library.js">

保持漂亮，短，简单，可维护！：]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// 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]);
}
}

此代码只是一个简短的功能示例，它可能需要额外的功能来在任何(或给定)平台上获得完全支持。

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

yepnope.js内置于modernizer中，lab.js是一个更优化的版本(但用户友好度较低)。

我不建议通过像jquery或prototype这样的大型库来完成这项工作，因为脚本加载器的主要优点之一是能够提前加载脚本-在运行检查以查看是否要动态加载脚本之前，您不必等到jquery&all-dom元素加载之后再进行检查。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

您不需要jquery，因此最初也可以使用它来加载jquery.js文件。
它与回调是异步的
它确保它只加载一次，因为它使用加载的URL的记录来保存一个存储模块，从而避免使用网络
与jquery $.ajax或$.getScript相反，您可以使用nonces，从而解决csp unsafe-inline的问题。只需使用财产script.nonce。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

现在你只需

1	getScriptOnce("url_of_your_JS_file.js");

我在所有这些示例中都丢失了，但今天我需要从main.js加载一个外部的.js，我这样做了：

1	document.write("<script src='https://www.google.com/recaptcha/api.js'>");

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

我知道我对这个问题的回答有点晚了，但是，这里有一篇伟大的文章在www.html5rocks.com上-深入到脚本加载的黑暗水域。

在这篇文章中，我们得出结论，在浏览器支持方面，动态加载javascript文件而不阻止内容呈现的最佳方法如下：

考虑到您有四个名为script1.js, script2.js, script3.js, script4.js的脚本，那么您可以通过应用async=false来完成它：

1
2
3
4
5
6
7
8
9
10
11

[
'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添加的脚本，按照它们添加的顺序。

Safari5.0说：我理解"异步"，但不理解用JS将其设置为"假"。你的剧本一落地，我就按顺序执行。

IE<10表示：不知道"异步"，但有一个使用"onreadystatechange"的解决方案。

其他一切都说：我是你的朋友，我们会按计划来做的。

现在，Ie<10变通方案的完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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

1
2
3
4

!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"
])

对于那些认为加载JS库不应该超过一行代码的人来说，这是一个荒谬的一行代码：p

1	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(...)函数。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

相关讨论

像这样的…

1
2
3

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