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   
     
  • 相关阅读:
    mongodb
    python中读取文件的read、readline、readlines方法区别
    uva 129 Krypton Factor
    hdu 4734
    hdu 5182 PM2.5
    hdu 5179 beautiful number
    hdu 5178 pairs
    hdu 5176 The Experience of Love
    hdu 5175 Misaki's Kiss again
    hdu 5174 Ferries Wheel
  • 原文地址:https://www.cnblogs.com/ranran/p/3944163.html
Copyright © 2011-2022 走看看