手机站调试防止手机浏览器缓存css和js

admin2023-01-171031

手机浏览器缓存过于严重,还没有办法彻底清理,这对于开发者来说简直是噩梦,我也折腾了好久,终于找到了符合dede的方案。

原理:手机浏览器缓存css和js主要是判断html上的引用链接,如果没有变化就会去读取缓存。而我们知道url地址后面加上‘?=****’是可以正常访问的,所以我们只需要在head引用css和js的链接上加上一段变化的数字,确保每一次刷新数字变化,这样浏览器就会认为是新的文件重新下载。

dede的模版是htm结尾的html文件,无法解析php,js也必须在<script></script>内部才能解析。所以只能这样写。

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style/common.css">
<link rel="alternate" media="only screen and(max-width: 640px)"  href="{dede:global.cfg_mobile_host /} " >
<title>{dede:global.cfg_webname/}</title>
<meta name="keywords" content="{dede:global.cfg_keywords/}" />
<meta name="description" content="{dede:global.cfg_description/}" />
//就是下面这段
<script type="text/javascript">  
document.write("<link rel='stylesheet' type='text/css' href='{dede:global.cfg_templets_skin/}/style/index.css?v="+new Date().getTime()+"'>");
</script>
</head>

完成之后不要在网页的里右键查看源代码,这样是看不出来的,可以用审查元素找到这个位置查看,判断是否生效。

360截图18491007296347.jpg

以上是“防止手机浏览器缓存css和js”的方法,但我们可能还需要防止当前的html页面的缓存,这个可以用meta标签来解决。点击进入网页头部各种meta标签功能大全,“其他”里面的最后三个就是了。

网友评论