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

  1. //how to use the function below:
  2. //$.include('file/ajaxa.js');$.include('file/ajaxa.css');
  3. //or $.includePath  = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the same directory)
  4. $.extend({
  5. includePath: '',
  6. include: function(file)
  7. {
  8. var files = typeof file == "string" ? [file] : file;
  9. for (var i = 0; i < files.length; i++)
  10. {
  11. var name = files[i].replace(/^\s|\s$/g, "");
  12. var att = name.split('.');
  13. var ext = att[att.length - 1].toLowerCase();
  14. var isCSS = ext == "css";
  15. var tag = isCSS ? "link" : "script";
  16. var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' ";
  17. var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";
  18. if ($(tag + "[" + link + "]").length == 0) $("head").prepend("<" + tag + attr + link + "></" + tag + ">");
  19. }
  20. }
  21. });
  22. $.include('../js/jquery-ui-1.8.21.custom.min.js');
  23. $.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属性了，所以我删除了：

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

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

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

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

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

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

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

    1. Dynamically loading external JavaScript and CSS files
    2. 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:
    3. function loadjscssfile(filename, filetype){
    4. if (filetype=="js"){ //if filename is a external JavaScript file
    5. var fileref=document.createElement('script')
    6. fileref.setAttribute("type","text/javascript")
    7. fileref.setAttribute("src", filename)
    8. }
    9. else if (filetype=="css"){ //if filename is an external CSS file
    10. var fileref=document.createElement("link")
    11. fileref.setAttribute("rel", "stylesheet")
    12. fileref.setAttribute("type", "text/css")
    13. fileref.setAttribute("href", filename)
    14. }
    15. if (typeof fileref!="undefined")
    16. document.getElementsByTagName("head")[0].appendChild(fileref)
    17. }
    18. loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
    19. loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
    20. loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

动态加载js和css的jquery plugin的更多相关文章

  1. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

  2. 动态加载js、css 代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param ...

  3. 移动端性能优化动态加载JS、CSS

    JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zep ...

  4. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  5. JavaScript(第二十二天)【动态加载js和css】

    学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式.   一．元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...

  6. 动态加载JS 和 CSS

    <script type="text/javascript"> $(function () { var filename = '/assets/css/main.css ...

  7. 动态加载JS（css）文件

    <script language="javascript">document.write("<script src='test.js'><\ ...

  8. 动态加载js css 插件

    简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...

  9. jquery动态加载js/css文件方法

    先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...

随机推荐

  1. JAVA里面json和java对象之间的相互转换

    1. 把java 对象列表转换为json对象数组,并转为字符串 JSONArray array = JSONArray.fromObject(list);    String jsonstr = ar ...

  2. LR监控tomcat服务器

    采用编写VuGen脚本访问Tomcat的Status页面的方式获取性能数据(利用了关联和lr_user_data_point函数),本质上还是使用tomcat自带的监控页面,只是将监控结果加到LR的a ...

  3. IntelliJ IDEA 创建 hello world Java web Maven项目从头到尾都有图有真相2017版本

    学Java的大部分吧都是要整Java web开发项目的,那么最好用的编辑器估计就是这个 IntelliJ IDEA,然后现在maven管理项目是很流行的.然后我就示范一下,如何使用这个IntelliJ ...

  4. AdminLTE 框架应用（一 ）- 插件介绍

    原AdminLTE中的插件让我大部分都移除了,第一是占地方,需要的时候再引入也不迟,第二就是有些插件已经过时了,有比较好的插件可以替代.附上项目插件截图 1.bootstrap-addTabs 提供多 ...

  5. 微信小程序 功能函数 地图定位相对直线距离

      GetDistance:function(lat1, lng1, lat2, lng2){ // console.log(lat1) var radLat1 = lat1 * Math.PI / ...

  6. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  7. SQL Server bit数据类型

    bit值保存为1/0,1代表true,0代表false读取数据库数据时,可以直接用bool型读取该字段,会直接转换为true/false 数据库表结构 CREATE TABLE [dbo].[BitT ...

  8. SPOJ3713——Primitive Root

    终于有一个SPOJ题目是我自己独立做出来的,ORZ,太感动了. 题目意思是给你一个素数,问你一个数r是否满足,r,r^2,r^3,……,r^p-1,全不相同. 以前做过这种类型的题目额.是这样的. 根 ...

  9. hive表信息查询：查看表结构、表操作等--转

    原文地址:http://www.aboutyun.com/forum.PHP?mod=viewthread&tid=8590&highlight=Hive 问题导读:1.如何查看hiv ...

  10. 【刷题】BZOJ 1453 [Wc]Dface双面棋盘

    Description Input Output Sample Input Sample Output HINT Solution 不强制在线的动态图问题,那就LCT了 类似二分图那道题目 对于四个方 ...