`

刷新页面,动态引入 css 文件

 
阅读更多
在网页中,由于 css 文件缓存加载问题,可能导致更新后的 css 不能及时体现出来。
解决方案:在刷新页面时,动态引入加 tag 的 css 文件,代码如下:
    //获取随机数
    var getRandom = function(n){   
          var random=''; 
          for(var i=0;i<n;i++){ 
                random+=Math.floor(Math.random()*10); 
          } 
          return random;
     }
     // css 每次刷新随机tag
     function createLink(cssURL){ 
         var head = document.getElementsByTagName('head')[0],
             linkTag = null;
       
      if(!cssURL){
          return false;
      }    
      linkTag = document.createElement('link');
      linkTag.setAttribute('rel','stylesheet');
      linkTag.setAttribute('_group','recm');
      linkTag.setAttribute('type','text/css');
         linkTag.href = cssURL;  
         head.appendChild(linkTag); 
     }
     var cssURL = getRandom(8);
     cssURL = "./css/test.css?v=" + cssURL;
     createLink(cssURL);  

    
分享到:
评论

相关推荐

    meta演示 _引入 css 样式文件

    这是最常见的引入CSS文件的方法。 2. 在HTML文件中直接定义样式。通过标签在HTML文档的部分中编写CSS规则。这种方法适用于需要快速测试或小型项目。 3. 内联样式。通过style属性直接在HTML元素上应用样式规则,...

    HTML外部引用CSS文件不生效原因分析及解决办法

    作为一个前端小白,鼓捣了几...然后再我的html文件里面去引入这个外部css: XML/HTML Code复制内容到剪贴板 &lt;link rel=stylesheet type=text/css href=css/style.css&gt;  在浏览器一刷新。。哇,kao。竟然没

    jQuery CSS3页面刷新加载效果.zip

    这个资源包含了一种利用jQuery库和CSS3技术实现的加载动画效果,当用户点击刷新页面按钮时,会显示一个加载图标,以视觉方式告知用户页面正在更新内容。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM...

    mui开发js文件与css文件

    本文将详细探讨MUI中的JavaScript文件与CSS文件如何协同工作,以实现强大的功能和美观的界面。 一、MUI的JS文件 MUI的JavaScript文件主要负责交互逻辑和组件的动态行为。这些文件通常包括基础库、组件库以及特定...

    动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip

    在这个"动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip"压缩包中,你将找到一系列基于这些技术的超全案例,每个案例都是独立的HTML文件,便于学习和理解。 HTML5是超文本标记语言的最新版本,它引入了...

    jQuery css3文件上传动画界面代码

    此外,jQuery还支持异步上传,通过Ajax调用后台接口,实现在不刷新页面的情况下完成文件上传。 其次,CSS3是层叠样式表的最新版本,引入了许多新的样式属性和动画效果。在这个文件上传界面中,css3被用来设计上传...

    CSS Refresh

    cssrefresh是一个很不错的javascript类库,能够帮助你自动刷新页面中的CSS文件而不刷新页面,你需要做的就是引入提供的javascript文件。无须其它的配置步骤,非常方便。 使用代码,直接引入页面 [removed][removed]

    动态小米官网(html+css+js)

    此外,CSS还可能引入了过渡、动画效果,增强用户体验,如按钮点击后的反馈效果或者页面加载时的动态展示。 接着,JavaScript是实现网页动态功能的关键。在这个项目中,JavaScript可能被用来处理用户交互,比如监听...

    Springboot访问templates下的html页面,CSS,JS失效

    浏览器可能会缓存旧的CSS或JS文件,尝试强制刷新(Ctrl+F5)或清除浏览器缓存来测试新更改是否生效。 8. **错误日志**: 查看Spring Boot应用的日志,尤其是关于HTTP请求处理的错误信息,这有助于定位问题所在。 ...

    无限刷新 json绑定swiper css3

    标题 "无限刷新 json绑定swiper css3" 涉及到的是网页开发中的几个关键技术点,主要包括JSON(JavaScript Object Notation)数据格式、Swiper组件以及CSS3动画效果。接下来,我将详细介绍这些技术及其在实际应用中的...

    实现随机css效果

    可以使用JavaScript的`&lt;link&gt;`元素动态加载这些CSS文件,或者通过`&lt;style&gt;`元素将CSS内容直接插入到DOM中。例如: ```javascript var cssFiles = ['0.css', '1.css', '2.css']; var randomFile = cssFiles[Math....

    js+css+jquery资源合集(共9个文件)

    本合集中的CSS文件可能包含这些新特性的实例,帮助开发者掌握现代网页设计的技巧。 Ajax(异步JavaScript和XML)是一种在无需刷新整个页面的情况下更新部分网页的技术,提升了用户体验。通过XMLHttpRequest对象,...

    网站开发后台css/js/img文件

    在网站开发中,CSS(层叠样式表)、JavaScript和图片(img)是构建动态、交互性和视觉吸引力的网站后台不可或缺的元素。以下是关于这些关键组件的详细解释: **CSS(层叠样式表)** CSS是一种样式语言,用于描述...

    案例所需要的css+js文件

    在实际开发中,这些文件通常会被引入到HTML文档中,通过`&lt;link&gt;`标签引入CSS文件,通过`&lt;script&gt;`标签引入JavaScript文件。同时,开发者可能还会使用预处理器(如Sass、Less)和构建工具(如Webpack、Gulp)来更高效...

    为什么要在引入的css或者js文件后面加参数的详细讲解

    在网页开发中,我们经常会在引入CSS或JavaScript文件的URL后面添加一个参数,例如 `?v=1.2.3`。这种做法有着特定的目的,主要涉及到浏览器缓存和动态生成的内容两个方面。 首先,我们要了解浏览器缓存的概念。为了...

    网页js+css

    HTML文件可能有多个`&lt;script&gt;`标签来引入或内联编写JS代码,以及使用`&lt;link&gt;`标签引入CSS文件。JS代码可能会操作DOM(文档对象模型)来改变HTML元素的状态,而CSS可能包含媒体查询(media queries)以实现响应式设计...

    CSS 文件帮助文档大收集

    DHTML是HTML、CSS和JavaScript结合的一种技术,它允许网页内容在不刷新页面的情况下动态更新,提高了用户体验。 **JavaScript**: JavaScript是一种客户端脚本语言,常与CSS一起用于实现交互效果,如表单验证、动画...

    html+css+js实现漂亮网页

    AJAX(Asynchronous JavaScript and XML)技术使得页面能在不刷新的情况下与服务器进行异步数据交换,提升了用户体验。此外,JavaScript库和框架,如jQuery、React、Vue、Angular等,提供了更高效、易用的开发工具和...

    JavaScript+CSS的移动端3D翻转刷新

    在CSS文件中,开发者可能定义了3D翻转的相关样式,包括旋转角度、变换原点、过渡效果等;而在JS文件中,开发者编写了响应用户交互的逻辑,如监听触摸事件,控制翻转动画的开始和结束。 总的来说,"JavaScript+CSS的...

    Javascript动态引用CSS文件的2种方法介绍

    通过上述方法,可以在不刷新页面的情况下,动态地向页面中插入新的样式。这在许多场景中都是很有用的,比如在用户点击按钮时动态更改页面样式,或者在使用单页面应用(SPA)时根据应用状态动态改变样式。 文章中还...

Global site tag (gtag.js) - Google Analytics