一个简单的动态加载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. HDU 5855 Less Time, More profit 最大权闭合子图

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5855 Less Time, More profit Time Limit: 2000/1000 MS ...

  2. HDU 5646 DZY Loves Partition

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5646 bc:http://bestcoder.hdu.edu.cn/contests/con ...

  3. 0324操作系统cmd功能的扩展

    需求:1.实现清屏功能 2.实现不区分大小写功能 3.添加功能能添加新的命令符 设计:1.使用system("cls")清屏. 2.使用strlwr()函数把大写都变成小写 3.( ...

  4. lintcode-24-LFU缓存

    24-LFU缓存 LFU是一个著名的缓存算法 实现LFU中的set 和 get 样例 capacity = 3 set(2,2) set(1,1) get(2) >> 2 get(1) & ...

  5. Swift-自定义类的构造函数

    构造函数类似oc中的init方法默认情况下,创建一个,类会调用一个构造函数即使没写任何构造函数,编译器会默认一个构造函数如果是继承NSObject,可以对构造函数重写 class Person: NS ...

  6. 【第九周】psp

        代码累计 300+575+475+353+620=2223 随笔字数 1700+3000+3785+4210+4333=17695 知识点 java反射机制 数据库技术 动态规划算法 pyth ...

  7. hibernate.cfg.xml案例

    一.概念. hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库.既然学习Hibernate那么第 ...

  8. js控制iframe高度自动撑开

    <iframe src="index.html" width="100%" name="" id="myiframe&quo ...

  9. git 恢复单个文件

    首先查看该文件的历史版本信息:git log Default@2x.png 记录下需要恢复的commit版本号:如 9aa51d89799716aa68cff3f30c26f8815408e926 恢 ...

  10. Django 2.0 学习(18)：Django 缓存、信号和extra

    Django 缓存.信号和extra Django 缓存 由于Django是动态网站,所以每次请求均会去数据库进行相应的操作,当程序访问量大时,耗时必然会显著增加.最简单的解决方法是:使用缓存,缓存将 ...