在前端开发中，刷新页面是一个非常常见的操作，下面我们会从 JS 的角度来探索几种刷新当前页面的方法，并给出详细的介绍和代码实例。

## 1. location.reload()

最简单的刷新页面方法就是使用 location.reload() 函数。location 对象表示当前文档的 URL 信息，而 reload() 方法可以用于重新加载当前文档。在不传递参数的情况下，该方法会从服务器重新加载当前页面。也可提供一个可选的 Boolean 值作为参数，该值指示是否强制从服务器重新加载页面。

```

location.reload(); // 重新加载页面，会从服务器获取最新的数据进行展示

location.reload(true); // 强制刷新页面，会从服务器获取最新的数据进行展示

```

需要注意的是，location.reload() 方法会清除当前表单的数据。如果需要保留表单数据，应使用 location.href 属性或 location.assign() 方法。

## 2. location.href 属性

location.href 属性可读可写，表示当前文档的 URL 地址。通过将其设置为当前页面的 URL 地址，可以刷新当前页面。类似于 location.reload() 方法，这样刷新页面会从服务器获取最新的数据。

```

location.href = location.href; // 刷新当前页面，会从服务器获取最新的数据进行展示

```

需要注意的是，当 location.heref 设置为新的 URL 地址时，编写的代码将停止运行。因此如果需要在刷新页面之前执行一些代码，应该使用 setTimeout() 函数加上一定的延迟时间来实现。

## 3. location.replace()

location.replace() 函数的作用是使用指定的 URL 地址替换当前文档。在替换文档之前，浏览器会先将文档保存在历史记录中，这样用户就可以点击“后退”按钮回到原来的页面。

当使用 location.replace() 替换当前文档时，不会在历史记录中添加新的纪录，这意味着无法返回到之前的页面。

```

location.replace(location.href); // 用新的 URL 地址来替换当前文档，会从服务器获取最新的数据进行展示

```

需要注意的是，location.replace() 方法具有破坏性，因为它会替换当前文档并清除浏览器历史记录中的该文档状态。如果需要在替换文档之前执行一些代码，应该使用 setTimeout() 函数加上一定的延迟时间来实现。

## 4. location.assign()

location.assign() 函数的作用是加载一个新的文档，并将新文档添加到浏览器的历史记录中。这意味着在加载新文档后，用户可以通过点击“后退”按钮返回到原来的页面。

```

location.assign(location.href); // 加载一个新的文档，并将新文档添加到浏览器的历史记录中，会从服务器获取最新的数据进行展示

```

需要注意的是，location.assign() 方法具有破坏性，因为它将替换当前文档的所有信息，包括页面的 URL、历史记录和浏览历史记录。如果需要在加载新的文档之前执行一些代码，应该使用 setTimeout() 函数加上一定的延迟时间来实现。

## 5. window.location.reload()

window.location.reload() 与 location.reload() 函数具有相同的效果。window 对象是表示当前浏览器窗口的全局对象，它包含一些窗口级别的属性和方法。因此，window.location.reload() 可以理解为是 location.reload() 的另一种写法。

```

window.location.reload(); // 重新加载页面，会从服务器获取最新的数据进行展示

window.location.reload(true); // 强制刷新页面，会从服务器获取最新的数据进行展示

```

需要注意的是，window.location.reload() 和 location.reload() 函数的区别在于当文档位于一个框架中时，window.location.reload() 方法可以重新加载整个页面（包括所有框架），而 location.reload() 方法会重新加载当前文档中的框架。

## 6. location.reload(false)

location.reload(false) 可以强制查找缓存以获取页面资源，而不是从服务器重新加载资源。请注意，在重新加载缓存资源时，可能会导致某些资源未及时更新，从而导致页面显示错误。

```

location.reload(false); // 强制重新加载页面，并从缓存中获取所需的资源

```

## 示例代码

下面是一个使用 location.reload() 函数刷新页面的示例代码：

```html

刷新页面的几种方法

使用 location.reload() 刷新页面

使用 location.href 刷新页面

使用 location.replace() 刷新页面

使用 location.assign() 刷新页面

使用 window.location.reload() 刷新页面

使用 location.reload(false) 刷新页面

```

在这个示例中，页面展示了六个按钮，每个按钮对应着一种刷新页面的方法。点击对应的按钮后，页面将使用对应的方法重新加载，从而实现页面的刷新。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！