如何用HTML按钮强制重载静态页面（绕过缓存）？

一、用按钮触发强制重载（绕过缓存） #

直接给按钮绑定location.reload(true)方法，这个方法里的true参数会告诉浏览器忽略本地缓存，直接从服务器重新拉取所有资源（包括图片、CSS、JS等）。

示例代码：

<button onclick="location.reload(true)">强制刷新页面</button>

二、页面级强制禁用缓存 #

如果希望整个页面每次加载都不使用缓存，可以在HTML的<head>里添加以下meta标签，让浏览器每次都从服务器获取最新内容：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

• Cache-Control的三个值组合：no-cache要求浏览器验证资源有效性，no-store禁止浏览器存储任何缓存副本，must-revalidate强制浏览器每次都向服务器验证资源是否过期。
• Pragma兼容旧版浏览器，作用和no-cache类似。
• Expires设为0，让浏览器认为资源已过期，必须重新请求。

注意：如果你的服务器有单独的缓存配置（比如Nginx、Apache的缓存规则），这些meta标签可能会被服务器配置覆盖，这种情况下需要调整服务器的缓存策略，比如给静态资源设置较短的过期时间，或者添加版本号到资源文件名（比如image_v2.jpg），确保更新后浏览器能识别到新资源。

内容的提问来源于stack exchange，提问作者David.P