当前位置：首页 > news >正文

js刷新页面的几种方法

news 2026/5/12 16:59:58

JavaScript 刷新页面的几种常用方法

在前端开发中，刷新当前页面是常见需求。JavaScript 提供了多种方式实现页面刷新，下面列出最常用的6 种方法，并附带说明、优缺点和适用场景。

方法	代码示例	说明	是否保留表单数据/滚动位置	推荐度
1. location.reload()（最推荐）	```javascript
2. location.reload(true)（强制刷新）	`javascript<br>location.reload(true);<br>`	已废弃（现代浏览器忽略 true 参数），但旧代码中常见。实际效果同 reload()	不保留	★★★
3. window.location.href = window.location.href	`javascript<br>window.location.href = window.location.href;<br>`	将当前 URL 重新赋值，触发新请求	不保留	★★★★
4. window.location.assign/current URL	`javascript<br>window.location.assign(window.location.href);<br>`	与 href 赋值类似，加载新文档	不保留	★★★
5. history.go(0)	`javascript<br>history.go(0);<br>`	等同于点击浏览器“刷新”按钮，效果最接近用户手动刷新	有时能保留部分状态（如滚动位置）	★★★★
6. document.location.replace(current URL)	`javascript<br>document.location.replace(window.location.href);<br>`	替换当前历史记录（不会增加新历史项），刷新后无法“后退”到刷新前页面	不保留	★★（慎用）

详细示例与使用场景

1. 最推荐：location.reload()

<buttononclick="location.reload()">刷新页面</button>

简单、标准、兼容性最好。
适用于大多数场景（如数据更新后刷新、登录超时跳转后刷新等）。

2. 强制从服务器重新加载（绕过缓存）
现代浏览器中reload(true)已无效，推荐使用Cache-Control或以下方式：

// 方法A：添加时间戳参数（推荐）window.location.href=window.location.pathname+'?t='+newDate().getTime();// 方法B：修改 headers（需后端配合或 Service Worker）location.reload();// 结合 meta 或 headers: Cache-Control: no-cache

3. 保留当前路径和查询参数刷新

// 当前页面是 /user?id=123，刷新后仍保持参数window.location.href=window.location.href;

4. history.go(0) - 最像手动刷新

<button onclick="history.go(0)">刷新</button>

用户体验最好，有时能保留滚动位置和部分表单状态。
单页应用（SPA）中慎用，可能引发意外行为。

5. 特殊场景：replace（不留历史记录）

// 登录成功后跳转并刷新，防止后退回到登录页document.location.replace('/dashboard');

实际应用组合示例

<!-- 登录成功后刷新页面 --><script>functionloginSuccess(){alert('登录成功！');location.reload();// 推荐方式}</script><!-- 数据提交后刷新（防止重复提交） -->function submitForm() { // 提交 AJAX... if (success) { location.reload(); } }<!-- 定时自动刷新（如监控页面） -->setInterval(() => { location.reload(); }, 30000); // 每30秒刷新一次