关于jquery：在页面中动态添加javascript文件的方法

Ways to add javascript files dynamically in a page

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

例如，我想包括我的JS文件，

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

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

相关讨论

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

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

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文件对您来说要容易得多。

这是参考资料。

相关讨论

有许多不同的方法，但谷歌加载附加脚本的方式如下：

1
2
3
4

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

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

直接将脚本标记写入文档是最简单和最有效的方法。

相关讨论

根据Salaman A的建议，我发现Google现在如何通过分析来实现这一点：https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

下面是同一代码的更通用的版本：

1
2
3
4
5
6
7
8

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

我已经看到了脚本加载程序所做的工作。它所做的是遍历文档中的所有脚本标记，找到加载自己的脚本标记，例如：

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

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

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

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

Anand Thangapan发布了一个使用这些函数的解决方案。如果您使用的是jquery或moooltools这样的框架，那么它们都提供了自己的动态加载jsvascript的实现。

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

要动态添加新的javascript文件：

1
2
3
4
5
6
7
8
9
10
11
12

相关讨论

如果您有一些document.ready()内联工作，那么document.getElementsByTagName("head")[0].appendChild(fileref??)将不工作。$("head").append(fileref);对我来说很有用，尽管它需要jquery.min.js内联引用。

1
2
3
4
5
6
7
8
9

<head>

<script src="script/jquery.min.js">
<script src="script/master_load.js">

load_master_css();
load_master_js();

</head>

和master_load.js：

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

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

1
2
3
4
5
6

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

相关讨论