手机站调试防止手机浏览器缓存css和js
手机浏览器缓存过于严重,还没有办法彻底清理,这对于开发者来说简直是噩梦,我也折腾了好久,终于找到了符合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>
完成之后不要在网页的里右键查看源代码,这样是看不出来的,可以用审查元素找到这个位置查看,判断是否生效。
以上是“防止手机浏览器缓存css和js”的方法,但我们可能还需要防止当前的html页面的缓存,这个可以用meta标签来解决。点击进入网页头部各种meta标签功能大全,“其他”里面的最后三个就是了。