一个简单的动态加载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. alpha8/10

    队名:Boy Next Door 燃尽图 晗(组长) 今日完成 和队友讨论alpha版的最终界面. 明日工作 确定alpha版既定功能的正常使用. 还剩下哪些任务 账号绑定功能以及账单信息的下载. 困 ...

  2. Java try catch

    /*   异常处理的捕捉形式: 这是可以对异常进行针对性处理的方式.   具体格式是: try { //需要被检测异常的代码. } catch(异常类 变量)//该变量用于接收发生的异常对象 { // ...

  3. （五）hadoop系列之__集群搭建SSH无密访问多台机器

    免密码ssh设置 现在确认能否不输入口令就用ssh登录localhost: $ ssh localhost 如果不输入口令就无法用ssh登陆localhost,执行下面的命令: . 并修改hosts映 ...

  4. [CB] 中国超算前100 (联想40 曙光40 浪潮12 国防科大4 华为2 国家并行工程中心2 )

    转帖 地址: https://www.cnbeta.com/articles/tech/779633.htm 榜单的前三名和去年相比没有任何变化,依然分别是部署在国家超级计算无锡中心的“神威·太湖之光 ...

  5. django的第一个问题

    /usr/local/lib/python2.7/dist-packages/allauth/account/utils.py in setup_user_email, line 258 /usr/l ...

  6. Hibernate学习--hibernate延迟加载原理-动态代理(阿里电面)

    在正式说hibernate延迟加载时,先说说一个比较奇怪的现象吧:hibernate中,在many-to-one时,如果我们设置了延迟加载,会发现我们在eclipse的调试框中查看one对应对象时,它 ...

  7. 第166天：canvas绘制饼状图动画

    canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. 【Asp.Net Core】在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

  9. BGP与BGP机房 国内网络运营商的主流网关解决方案

    边界网关协议(BGP)是运行于 TCP 上的一种自治系统的路由协议. BGP 是唯一一个用来处理像因特网大小的网络的协议,也是唯一能够妥善处理好不相关路由域间的多路连接的协议. BGP 构建在 EGP ...

  10. 【BZOJ1042】硬币购物（动态规划，容斥原理）

    [BZOJ1042]硬币购物(动态规划,容斥原理) 题面 BZOJ Description 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬 ...