当前位置：首页 > JavaScript

js实现页面自动刷新

2026-01-30 17:45:29JavaScript

使用 `location.reload()` 方法

通过调用 location.reload() 可以实现页面刷新。该方法会重新加载当前页面，类似于用户手动点击浏览器的刷新按钮。

// 自动刷新页面（无缓存）
location.reload(true);

// 自动刷新页面（允许缓存）
location.reload();

true 参数强制从服务器重新加载页面，忽略缓存。

使用 `setTimeout` 定时刷新

通过 setTimeout 设置延迟时间，实现定时刷新。例如，5秒后刷新页面：

setTimeout(() => {
  location.reload();
}, 5000); // 5000毫秒（5秒）

使用 `setInterval` 循环刷新

通过 setInterval 实现周期性自动刷新。例如，每10秒刷新一次：

setInterval(() => {
  location.reload();
}, 10000); // 10000毫秒（10秒）

注意：需在适当的时候调用 clearInterval 停止刷新，避免内存泄漏。

使用 Meta 标签自动刷新

在 HTML 的 <head> 中添加 <meta> 标签，通过 http-equiv="refresh" 实现自动刷新。例如，5秒后刷新：

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

content 值为刷新间隔时间（秒）。若需跳转到其他页面，可指定 URL：

<meta http-equiv="refresh" content="5; url=https://example.com">

结合事件触发刷新

根据用户操作或特定事件（如按钮点击）触发刷新：

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

使用 Service Worker 控制刷新

通过 Service Worker 拦截网络请求并控制页面刷新逻辑：

js实现页面自动刷新

// 注册 Service Worker
navigator.serviceWorker.register('/sw.js').then(() => {
  console.log('Service Worker 注册成功');
});

// 在 sw.js 中监听事件
self.addEventListener('install', (event) => {
  self.skipWaiting(); // 强制激活新 Service Worker
});