一个简单的动态加载js和css的jquery代码

前端技术 2023/09/08 JavaScript

一个简单的动态加载js和css的jquery代码，用于在生成页面时通过js函数加载一些共通的js和css文件。

//how to use the function below: 
//$.include(\'file/ajaxa.js\');$.include(\'file/ajaxa.css\'); 
//or $.includePath = \'file/\';$.include([\'ajaxa.js\',\'ajaxa.css\']);(only if .js and .css files are in the same directory) 
$.extend({ 
includePath: \'\', 
include: function(file) 
{ 
var files = typeof file == \"string\" ? [file] : file; 
for (var i = 0; i < files.length; i++) 
{ 
var name = files[i].replace(/^\\s|\\s$/g, \"\"); 
var att = name.split(\'.\'); 
var ext = att[att.length - 1].toLowerCase(); 
var isCSS = ext == \"css\"; 
var tag = isCSS ? \"link\" : \"script\"; 
var attr = isCSS ? \" type=\'text/css\' rel=\'stylesheet\' \" : \" type=\'text/javascript\' \"; 
var link = (isCSS ? \"href\" : \"src\") + \"=\'\" + $.includePath + name + \"\'\"; 
if ($(tag + \"[\" + link + \"]\").length == 0) $(\"head\").prepend(\"<\" + tag + attr + link + \"></\" + tag + \">\"); 
} 
} 
}); 
$.include(\'../js/jquery-ui-1.8.21.custom.min.js\'); 
$.include(\'../css/black-tie/jquery-ui-1.8.21.custom.css\');

将该函数写入一个common.js文件中，在html中加载该common.js文件，就可以达到目的。
注意：
1.在html5中，<script>标签已经不支持language属性了，所以我删除了：

var attr = isCSS ? \" type=\'text/css\' rel=\'stylesheet\' \" : \" language=\'javascript\' type=\'text/javascript\' \";

中的language=\'javascript\'
2.原作者在写入js和css标签时，用的是：

document.write(\"<\" + tag + attr + link + \"></\" + tag + \">\");

但是经过实践，发现document.write（）方法会在写入前清除原页面的所有内容，也就相当于覆盖的意思，这样明显达不到我的需要，我需要在加载页面时动态的向页面导入共通的js和css，而不能清除我原页面的其他任何内容，所以查了下api，我改用了：

$(\"head\").prepend(\"<\" + tag + attr + link + \"></\" + tag + \">\");

这个方法，$(\"head\").prepend（）方法的作用是在<head>标签的最前端追加写入内容。

最后，再补充一个方法，也是通过共通js来实现，应该比上面这个方法更容易理解：

Dynamically loading external JavaScript and CSS files 

To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new \"SCRIPT\" or \"LINK\" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together: 

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

本文地址：https://www.stayed.cn/item/22116

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案