我看到Scriptaculous.js文件可以动态地包含其所需的JavaScript文件。是否有更好的方法来动态地包含JavaScript?
例如,我想像这样包含我的js文件,
<script src="single.js?files=first.js,second.js,third.js..."></script>
我该如何以高效的方式实现这个?
我看到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);
})();
仅供记录,不建议使用。
有许多不同的方法,但 Google 加载附加脚本的方式是这样的:
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
这段内容直接来自Google地图加载器。
将脚本标签直接写入文档是最简单、最高效的方法。
document.write
,更新的脚本则使用document.createElement
。这里还有另外一篇有趣的阅读材料:避免使用document.write。 - Salman Avar script = document.createElement("script");
script.src = "https://example.com/your_script.js";
document.body.appendChild(script);
await import(...)
。这超出了本答案的范围,但您可以在这里阅读更多相关信息。body
而不是head
? - undefinedfunction 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');
<script src="/path/to/single.js?files=first.js,second.js,third.js"></script>
然后它解析了src属性中使用的查询字符串,并为每个脚本文件动态创建额外的script标记。同时,它还解析了基础脚本的路径(/path/to/single.js
),并使用相同的路径加载依赖文件(例如/path/to/first.js
)。
您可以像这样创建自己的脚本加载器。在原生JavaScript中,您可以使用以下函数:
getElementsByTagName
-- 查找所有脚本getAttribute
-- 查找src/href/type属性createElement
-- 创建脚本元素appendChild
-- 添加到head/body中Anand Thangappan发布了一个使用这些函数的解决方案。如果您正在使用jQuery或MooTools等框架,则两者都提供了自己的动态加载JavaScript的实现。
最后,有一个服务器端的解决方案可以解决你的问题。看看minify -- 将多个CSS或JavaScript文件合并和压缩成一个下载。
document.getElementsByTagName("head")[0].appendChild(fileref)
将无法正常工作。对我来说,$("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>
和 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();
}
}
filename
和filetype
,但你没有使用它们,而使用了你没有声明的fileref
。 - GôTô