一个简单的动态加载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 5875 Function 优先队列+离线

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5875 Function Time Limit: 7000/3500 MS (Java/Others) ...

  2. HDU 5183 Negative and Positive (NP) 前缀和+哈希

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5183 bc(中文):http://bestcoder.hdu.edu.cn/contests ...

  3. C语言的问卷调查

    1.你对自己的未来有什么规划?做了哪些准备? 未来想当一个网络工程师,为了这个目标我正在努力学习网络.网页及相关的知识. 2.你认为什么是学习?学习有什么用?现在学习动力如何?为什么? 学习就是不断尝 ...

  4. 通过一台服务器ssh多台主机远程修改网卡ip

    在多台服务器环境下,更改所有的ip地址,网关,一台一台的登录修改显得复杂繁琐.   知识点: 参考#https://www.cnblogs.com/youngerger/p/9104144.html ...

  5. selenium webdriver 表格的定位方法练习

    selenium webdriver 表格的定位方法 html 数据准备 <html> <body> <div id="div1"> <i ...

  6. 【前端学习笔记】arguments相关

    arguments转数组: (function() { console.log(arguments instanceof Array); // --> false console.log(Obj ...

  7. 第120天：移动端-Bootstrap基本使用方法

    一.Bootstrap使用 1.搭建Bootstrap页面骨架及项目目录结构 ``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...

  8. BZOJ 2039 人员雇佣(最小割)

    最小割的建图模式一般是,先算出总收益,然后再通过网络模型进行割边减去部分权值. 然后我们需要思考什么才能带来收益,什么才能有权值冲突. s连向选的点,t连向不选的点,那么收益的减少量应该就是将s集和t ...

  9. BZOJ 3786: 星系探索 解题报告

    3786: 星系探索 Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均有且仅 ...

  10. CF785D Anton and School - 2 解题报告

    CF785D Anton and School - 2 题意:给定一个长度\(\le 2 \times 10e5\)由'('和')'组成的字符串,问有多少个子串(可以不连续),前半部分是由\('('\ ...