一个简单的动态加载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. Alpha 冲刺8

    队名:日不落战队 安琪(队长) 今天完成的任务 登录的数据post. okhttp学习第二弹. 明天的计划 okhttp学习第三弹. 个人信息界面数据get. 还剩下的任务 个人信息数据get. 遇到 ...

  2. Solr初步研究

    Solr是一个高性能,采用Java5开发,Solr基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化,并且提供 ...

  3. 词法分析用c++实现的

    #include<stdio.h>#include<string.h>int i,j,k,sign,flag,number,run;char ch;char word[10]; ...

  4. Objective - C 之延展

    延展:为已有的类新增私有方法,只能在本类中使用 一.创建过程: 二.总结: 1.延展只有.h文件,在其中写新方法的声明,在原本的类(Person)中写方法的实现: 2.上述的方法其实很不安全,因为如果 ...

  5. 使用.bat文件运行ant的build.xml

    1.新建一个txt文件 2.复制下面命令到txt文件 echo "Start build..." call ant.bat -f "E:\build.xml" ...

  6. C#和Java访问修饰符的比较

    访问修饰符对于C#:类 的默认修饰符是 internal(外部类只能被public / internal 修饰)枚举 的默认修饰符是 public 且此类型不允许其它访问修饰符接口 的默认修饰符是 i ...

  7. 第163天：js面向对象-对象创建方式总结

    面向对象-对象创建方式总结 1. 创建对象的方式,json方式 推荐使用的场合: 作为函数的参数,临时只用一次的场景.比如设置函数原型对象. var obj = {}; //对象有自己的 属性 和 行 ...

  8. 基本数据类型用 == 判断的是值 ，对象用 == 判断的是地址 ， 判断值的话用 equals()

    基本数据类型用 == 判断的是值   ,对象用 == 判断的是地址 ,  判断值的话用 equals() 字符串是String的实例

  9. BZOJ5017 Snoi2017炸弹（线段树+强连通分量+缩点+传递闭包）

    容易想到每个炸弹向其能引爆的炸弹连边,tarjan缩点后bitset传递闭包.进一步发现每个炸弹能直接引爆的炸弹是一段连续区间,于是线段树优化建图即可让边的数量降至O(nlogn).再冷静一下由于能间 ...

  10. Linux内核分析4

    周子轩原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 使用库函数API和C代码 ...