一个简单的动态加载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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
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 抽象类的简单应用
2011/09/06 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
vue实现标签云效果的示例
2020/11/09 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
Python networkx包的实现
2020/02/14 Python
keras中的backend.clip用法
2020/05/22 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
大学军训感想
2014/02/12 职场文书
拓展训练激励口号
2014/06/17 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS