广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    JavaScript和Jquery动态加载Js文件和Css文件

    2018-04-04 08:35:14 次阅读 稿源:互联网
    零七广告

    JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,动态加载 CSS 的方法主要有三种,下面详细说明。如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助。

    (1)使用JavaScript动态加载Js文件

    1. /*JavaScript动态加载Js文件*/ 
    2. var scriptNode = document.createElement('script'); 
    3. scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ 
    4. document.head.appendChild(scriptNode); 

    (2)使用JavaScript动态加载css文件

    1. /*JavaScript动态加载Css文件*/ 
    2. var cssNode = document.createElement('link'); 
    3. cssNode.rel = 'stylesheet'
    4. cssNode.type = 'text/css'
    5. cssNode.media = 'screen'
    6. cssNode.href = 'style.css?t='+new Date().getTime();/*附带时间参数,防止缓存*/ 
    7. document.head.appendChild(cssNode); 

    (3)Jquery动态加载Js和Css扩展

    1. $.extend({ 
    2.      includePath: ''
    3.      include: function(file) { 
    4.         var files = typeof file == "string" ? [file]:file; 
    5.         for (var i = 0; i < files.length; i++) { 
    6.             var name = files[i].replace(/^/s|/s$/g, ""); 
    7.             var att = name.split('.'); 
    8.             var ext = att[att.length - 1].toLowerCase(); 
    9.             var isCSS = ext == "css"
    10.             var tag = isCSS ? "link" : "script"
    11.             var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' "
    12.             var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'"
    13.             if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">"); 
    14.         } 
    15.    } 
    16. }); 

    使用方法:

    1. $.include('http://www.daimajiayuan.com/include/dedeajax2.js'); 
    2. $.include('http://www.daimajiayuan.com/templets/skins/style/android.css'); 

    或者:

    1. $.includePath='www.daimajiayuan.com/html/'
    2. $.include([dedeajax2.js','android.css']); 

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告