zoukankan      html  css  js  c++  java
  • 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件。 
    Java代码  收藏代码
    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属性了,所以我删除了: 
    Java代码  收藏代码
    1. var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";  

    中的language='javascript' 
    2.原作者在写入js和css标签时,用的是: 
    Java代码  收藏代码
    1. document.write("<" + tag + attr + link + "></" + tag + ">");  

    但是经过实践,发现document.write()方法会在写入前清除原页面的所有内容,也就相当于覆盖的意思,这样明显达不到我的需要,我需要在加载页面时动态的向页面导入共通的js和css,而不能清除我原页面的其他任何内容,所以查了下api,我改用了: 
    Java代码  收藏代码
    1. $("head").prepend("<" + tag + attr + link + "></" + tag + ">");  

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

    最后,再补充一个方法,也是通过共通js来实现,应该比上面这个方法更容易理解: 
    Java代码  收藏代码
    1. Dynamically loading external JavaScript and CSS files   
    2.   
    3. 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:   
    4.   
    5. function loadjscssfile(filename, filetype){   
    6. if (filetype=="js"){ //if filename is a external JavaScript file   
    7.   var fileref=document.createElement('script')   
    8.   fileref.setAttribute("type","text/javascript")   
    9.   fileref.setAttribute("src", filename)   
    10. }   
    11. else if (filetype=="css"){ //if filename is an external CSS file   
    12.   var fileref=document.createElement("link")   
    13.   fileref.setAttribute("rel", "stylesheet")   
    14.   fileref.setAttribute("type", "text/css")   
    15.   fileref.setAttribute("href", filename)   
    16. }   
    17. if (typeof fileref!="undefined")   
    18.   document.getElementsByTagName("head")[0].appendChild(fileref)   
    19. }   
    20.   
    21. loadjscssfile("myscript.js", "js") //dynamically load and add this .js file   
    22. loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file   
    23. loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file   
     
  • 相关阅读:
    转:超级好用的流程图js框架
    流程图插件
    转:介绍几个著名的实用的Java反编译工具,提供下载
    关于 web.config impersonate 帐号模拟
    SQLSERVER 使用 ROLLUP 汇总数据,实现分组统计,总计(合计),小计
    【论文排版工具】——LaTeX的安装及使用(MiKTeX+TexStudio+Windows)
    C语言输入带空格的字符串
    SQL-连接查询:left join,right join,inner join,full join之间的区别
    MySQL与Oracle的隔离级别
    区块链节点运维相关
  • 原文地址:https://www.cnblogs.com/ranran/p/3944163.html
Copyright © 2011-2022 走看看