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


Posted in Javascript onSeptember 01, 2014

一个简单的动态加载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
Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
javascript的几种写法总结
Sep 30 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 #Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 #Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 #Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 #Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 #Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 #Javascript
影响jQuery使用的14个方面
Sep 01 #Javascript
You might like
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
js读写json文件实例代码
2014/10/21 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python实现简单的socket server实例
2015/04/29 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python面向对象 反射原理解析
2019/08/12 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Python对wav文件的重采样实例
2020/02/25 Python
如何把python项目部署到linux服务器
2020/08/26 Python
上课看小说检讨书
2014/02/22 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
个人作风建设心得体会
2014/10/22 职场文书
综合测评个人总结
2015/03/03 职场文书
清明节寄语2015
2015/03/23 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python