动态加载js和css的jquery plugin
一个简单的动态加载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文件，就可以达到目的。该js函数出自以下链接：
http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html
注意：
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
动态加载js和css的jquery plugin的更多相关文章
- 动态加载js和css
开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...
- 动态加载js、css 代码
一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param ...
- 移动端性能优化动态加载JS、CSS
JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zep ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- JavaScript(第二十二天)【动态加载js和css】
学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式. 一．元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...
- 动态加载JS 和 CSS
<script type="text/javascript"> $(function () { var filename = '/assets/css/main.css ...
- 动态加载JS（css）文件
<script language="javascript">document.write("<script src='test.js'><\ ...
- 动态加载js css 插件
简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...
- jquery动态加载js/css文件方法
先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...
随机推荐
- 解析DXF图形文件格式
一.DXF文件格式分析 DXF文件由标题段.表段.块段.实体段和文件结束段5部分组成,其内容如下. ☆标题段(HEADER)标题段记录AutoCAD系统的所有标题变量的当前值或当前状态.标题变量记录了 ...
- PAT 甲级 1144 The Missing Number
https://pintia.cn/problem-sets/994805342720868352/problems/994805343463260160 Given N integers, you ...
- 某客的《微信小程序》从基础到实战视频教程
第 1 部分 微信小程序从基础到实战课程概要 第 1 节 微信小程序从基础到实战课程概要 1.1微信小程序从基础到实战课程概要 第 2 部分 初识微信小程序 第 1 节 微信小程序简 ...
- DateTime Toxxx() 方法获取时间
直接上代码 static void Main(string[] args) { DateTime time = DateTime.Now; Console.WriteLine("ToFile ...
- 第188天：extend拷贝创建对象的原理
一.拷贝创建对象的原理 //拷贝创建对象核心代码 function extend(target,source) { //遍历对象 for(var i in source){ target[i] = s ...
- luogu 1712 区间(线段树+尺取法)
题意:给出n个区间,求选择一些区间,使得一个点被覆盖的次数超过m次,最小的花费.花费指的是选择的区间中最大长度减去最小长度. 坐标值这么大,n比较小,显然需要离散化,需要一个技巧,把区间转化为半开半闭 ...
- Python 模板 Jinja2
Python 模板 Jinja2 模板 要了解Jinja2,就需要先理解模板的概念.模板在Python的web开发中广泛使用,它能够有效的将业务逻辑和页面逻辑分开,使代码可读性更强.更加容易理解和维护 ...
- 【数据库_Mysql】查询当前年份的sql
1.本年份 SELECT DATE_FORMAT(NOW(), '%Y'); 2.本月份(显示数字) SELECT DATE_FORMAT(NOW(), '%m'); 3.本月份(显示英文) SELE ...
- 配置用户通过Telnet登录设备的身份认证（AAA本地认证）
背景信息 用户通过Telnet登录设备时,设备上必须配置验证方式,否则用户无法成功登录设备.设备支持不认证.密码认证和AAA认证三种用户界面的验证方式,其中AAA认证方式安全性最高. 采用AAA本地认 ...
- 【刷题】洛谷 P4142 洞穴遇险
题目背景 ZRQ在洞穴中准备采集矿物的时候遇险了!洞穴要塌了! 题目来源:zhoutb2333 题目描述 整个洞穴是一个 \(N*N\) 的方格图,每个格子形如 \((X,Y),1 \le X,Y \ ...