前端，静态页面如何给index.html后缀增加index.html?v=xxxxx 随机数？

问题是这样的：
目前在做微信页面，由于缓存很厉害，所以需要给index.html主页面的url添加随机数，就是说当每刷新一次页面就请求一个不同的页面，
window.location.href=window.location.href+"?v="+new Date().getTime();
如果这样来做，页面会不停的跳转（因为刷新一次改一下 url,导致了再一次刷新，陷入了一直刷新的死循环），

所以，我这样来判断“？”是否存在

if(window.location.href.indexOf("?")==-1) {
    window.location.href=window.location.href+"?v="+new Date().getTime();
}

但是，这样又只能跳转一次？

如何让每刷新一次，跳转一个不同的页面，就说后面随机数要变化，而又不陷入死循环呢？

阅读 6.2k

我想出两种方案，

1、服务器端返回文件的时候，设置响应头，

cache-control:no-cache

貌似是这样，告诉浏览器不要缓存；

2、前端控制，核心是，如何区分代码里修改 url 导致的刷新和用户的刷新，代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
    let presentTime = (new Date()).getTime(),
        hrefWithoutSearch = location.protocol + '//' + location.host + location.pathname;

    if (localStorage.getItem('previousHref') === null) {
        localStorage.setItem('previousHref', hrefWithoutSearch + "?v=" + presentTime);
        localStorage.setItem('previousAccessTime', presentTime);
        location.href = hrefWithoutSearch + "?v=" + presentTime;
    } else {
        let interval = presentTime - parseInt(localStorage.getItem('previousAccessTime'), 10);
        if (interval > 2000) {
            localStorage.setItem('previousAccessTime', presentTime);
            location.href = hrefWithoutSearch + "?v=" + presentTime;
        }
    }
    </script>
</body>

</html>

原理：

代码修改 url 的刷新，不能继续刷新，否则陷入死循环；
用户的刷新要修改 url，返回新的页面；

所以，onbeforeunload,onunload 都无法来区分，我想到的可以区分的就是，用户的操作

键盘事件：F5，CTRL+R，地址栏回车，地址栏旁边的刷新按钮
鼠标事件: 右键刷新

我觉得比较困难，尤其是地址栏回车按钮和地址栏旁的刷新；所以想了另外一个妥协的办法：

页面每次加载，都去 localStorage 里获取上次加载的时间 previousAccessTime，和当前时间一减，得出 interval ，假设跟 3秒比较；

3秒外，认为是用户刷新的，在用户刷新导致页面重新加载原来的 url 时，更新 previousAccessTime ，修改 url，导致重新加载了一个新的页面，这个时候的时间-previousAccessTime 通常小于 3秒，所以适用下一条；
3秒内，就判断是代码修改 url 导致的，所以不再去修改 url，避免了循环;
如果网速慢，导致了修改 url 重新加载的时间超过了3秒，那会重复，导致循环；
如果把时间改成譬如 10 秒，减少循环的可能，那么用户在 10秒内的刷新，就不会刷新。

后两点是缺点，当然可以通过其他方式去优化，比如，

调整这个 interval
把这个脚本放在最前面执行，减小网速慢的影响；

前端，静态页面如何给index.html后缀增加index.html?v=xxxxx 随机数？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

前端，静态页面如何给index.html后缀增加index.html?v=xxxxx 随机数？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？