如何使用JavaScript重新加载页面？

在前端开发中，有时候需要重新加载页面以更新内容或者执行一些操作。本文将介绍如何使用JavaScript重新加载页面，包括基本的重载和无缓存重载两种方式，并提供实用的示例代码。

基本重载

最简单的方法是使用 location.reload() 方法，它可以重新加载当前页面并使用缓存。如果您希望强制刷新缓存，则可以传递一个布尔值 true 作为参数，即 location.reload(true)。

// 基本重载示例
location.reload(); // 重新加载当前页面并使用缓存
location.reload(true); // 强制刷新缓存并重新加载当前页面

无缓存重载

有时候，我们需要无视浏览器缓存并强制重新加载页面。这个时候可以通过在URL后面添加随机字符串或时间戳来实现。以下是生成时间戳和添加到URL的示例代码：

// 生成时间戳
const timeStamp = new Date().getTime();

// 添加时间戳到URL
const url = window.location.href + '?timestamp=' + timeStamp;

// 无缓存重载当前页面
window.location.href = url;

另外，还可以使用 XMLHttpRequest 对象的 open() 方法发送一个不带缓存头的请求来实现无缓存重载：

// 无缓存重载示例
const xhr = new XMLHttpRequest();
xhr.open('GET', window.location.href, true);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Pragma", "no-cache");
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.send(null);

总结

使用JavaScript重新加载页面是前端开发中常见的操作。本文介绍了基本重载和无缓存重载两种实现方式，并提供了示例代码。无论您需要更新内容还是强制刷新浏览器缓存，这些方法都能帮助您实现目标。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8197