js实现页面自动刷新
使用 location.reload() 方法
通过调用 location.reload() 方法可以实现页面刷新。可以结合 setInterval 定时器实现自动刷新。
// 每隔5秒刷新一次页面
setInterval(function() {
location.reload();
}, 5000);使用 meta 标签实现自动刷新
在 HTML 的 <head> 部分添加 meta 标签，通过 http-equiv="refresh" 属性设置刷新时间。
<meta http-equiv="refresh" content="5">content 属性的值为刷新间隔时间（秒）。
使用 fetch 检测数据变化后刷新
如果目的是检测数据变化后刷新页面，可以通过 fetch 定期请求接口，判断数据是否更新。
// 每隔3秒检测数据
setInterval(async () => {
const response = await fetch('/api/data');
const data = await response.json();
if (data.updated) {
location.reload();
}
}, 3000);使用 Service Worker 控制刷新
通过 Service Worker 可以更灵活地控制页面刷新逻辑，例如在后台检测到新版本时提示用户刷新。
// 注册 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(registration => {
registration.addEventListener('updatefound', () => {
const newWorker = registration.installing;
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed') {
if (confirm('新版本可用，是否刷新？')) {
location.reload();
}
}
});
});
});
}注意事项
- 自动刷新可能影响用户体验，建议仅在必要时使用。
- 频繁刷新会增加服务器负载，需合理设置间隔时间。
- 对于单页应用（SPA），优先考虑局部更新而非整页刷新。
