当前位置：首页 > JavaScript

js实现刷新效果

2026-03-15 18:38:47JavaScript

使用 location.reload() 方法

通过调用 location.reload() 可以强制刷新当前页面。默认情况下会使用浏览器缓存，若需强制从服务器重新加载，可传入参数 true。

// 普通刷新（可能使用缓存）
location.reload();

// 强制从服务器重新加载
location.reload(true);

使用 location.replace() 方法

通过 location.replace() 可以重新加载页面，但不会在浏览历史中生成新记录。适合需要替换当前历史记录的场景。

location.replace(location.href);

使用 meta 标签自动刷新

在 HTML 的 <head> 中添加 meta 标签，设置自动刷新时间（秒）。以下代码实现每 5 秒刷新一次：

<meta http-equiv="refresh" content="5">

使用 setTimeout 定时刷新

通过 setTimeout 实现延迟刷新，以下代码在 3 秒后刷新页面：

setTimeout(function() {
    location.reload();
}, 3000);

使用 Fetch API 实现无感刷新

结合 Fetch API 检查数据更新，若有更新则触发刷新。以下示例每 10 秒检查一次数据版本：

const checkUpdate = () => {
    fetch('/api/version')
        .then(res => res.json())
        .then(data => {
            if (data.version > window.currentVersion) {
                location.reload();
            }
        });
};

setInterval(checkUpdate, 10000);

监听事件触发刷新

通过监听特定事件（如按钮点击）触发刷新：

document.getElementById('refreshBtn').addEventListener('click', () => {
    location.reload();
});

使用 Service Worker 控制刷新

通过 Service Worker 检测更新并提示用户刷新：

js实现刷新效果

navigator.serviceWorker.register('/sw.js').then(reg => {
    reg.addEventListener('updatefound', () => {
        const newWorker = reg.installing;
        newWorker.addEventListener('statechange', () => {
            if (newWorker.state === 'installed') {
                if (confirm('新版本可用，是否刷新？')) {
                    location.reload();
                }
            }
        });
    });
});