如何使用JavaScript刷新页面？
20个回答
4182
例如，当单击带有id="something"的元素时重新加载：
$('#something').click(function() {
location.reload();
});
reload() 函数可以接受一个可选参数，如果将其设置为 true ，则可以强制从服务器重新加载而不是从缓存中重新加载。该参数的默认值为 false，因此默认情况下页面可能会从浏览器缓存重新加载。
- Roy
5
519
使用JavaScript刷新页面有多种无限的方法：
location.reload()history.go(0)location.href = location.hreflocation.href = location.pathnamelocation.replace(location.pathname)location.reload(false)如果我们需要再次从Web服务器获取文档（例如，文档内容动态更改），则将参数传递为
true。
您可以继续创造性地列出列表：
window.location = window.locationwindow.self.window.self.window.window.location = window.location- ...以及其他534种方法
var methods = [
"location.reload()",
"history.go(0)",
"location.href = location.href",
"location.href = location.pathname",
"location.replace(location.pathname)",
"location.reload(false)"
];
var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
(function(cMethod) {
$body.append($("<button>", {
text: cMethod
}).on("click", function() {
eval(cMethod); // don't blame me for using eval
}));
})(methods[i]);
}button {
background: #2ecc71;
border: 0;
color: white;
font-weight: bold;
font-family: "Monaco", monospace;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.5s ease;
margin: 2px;
}
button:hover {
background: #27ae60;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>- Ionică Bizău
5
12对于列表和jsfiddle的点赞。我有一个问题，对于在jsfiddle中1和6使生成的页面消失一会儿，因为它被重新加载，而2-5使页面重新加载变得“不可察觉”。在chrome的开发者工具中，我可以看到页面正在重新生成，但您能否解释一下重绘过程的差异？谢谢。提前致谢。 - Cԃաԃ
@Cԃաԃ 我看不出有什么区别...也许是缓存的问题？我很快会去看一下。 - Ionică Bizău
21和6
(reload()/(false)) 的速度较慢。嗯，有趣。:) 因为1和6与 reload() 的默认参数 false 相同。 - Cԃաԃ1“location.href = location.href” 是我通常使用的，但感谢您提供其他方法。非常有用！+1 - Amal Murali
1@Cԃաԃ 最终我可以重现你所看到的，并在此处提问（https://dev59.com/g2Ei5IYBdhLWcg3w4Prr）。 - Ionică Bizău
216
有很多方法可以实现，我想:
window.location.reload();（刷新当前页面）history.go(0);（加载当前页面的最新版本）window.location.href=window.location.href;（重新加载当前页面）
- David
4
42如果你的URL末尾有一个#/hashbang，例如
example.com/something#blah，那么这个window.location.href=window.location.href;代码将不会有任何作用。 - AaronLS18如果有人想知道
location.reload()和history.go(0)之间的区别，那就没有区别。在HTML5规范的相关部分http://www.w3.org/TR/html5/browsers.html#dom-history-go中明确规定它们是等价的："当调用`go(delta)`方法时，如果该方法的参数被省略或其值为零，则用户代理必须像调用`location.reload()`方法一样执行。" - Mark Amery对我有效的唯一方法是这个：window.location.href=window.location.href; - Yster
window.location.href=window.location.href 对我有用。 - Rohit Singh
123
如果您正在使用jQuery并且希望异步刷新页面的内容，则可以按照以下步骤操作：
$.ajax({
url: "",
context: document.body,
success: function(s,x){
$(this).html(s);
}
});
我使用的方法是Ajax jQuery。我在Chrome 13上进行了测试。然后，我将代码放入处理程序中，以触发重新加载。URL是
""，这意味着此页面。请注意，这可能不是提问者所指的"刷新"。通常情况下，该术语是指以浏览器提供的用户界面中的"刷新/重新加载"按钮类似的方式重新加载页面。然而，这不是"刷新"的唯一可能含义，并且在特定情况下可能更受欢迎。
这段代码的作用是获取新的和更新的内容到页面。它通过对新内容进行异步HTTP请求，然后用新异步加载的内容替换页面的当前内容来实现。虽然它的工作方式略有不同，但它的结果是刷新页面的内容。
你必须选择你实际想要的内容，以及哪种方式适合你的具体用例。
- Peter
7
6重新加载整个HTML的一个问题在于需要手动调用onload/ready事件，以及减轻先前声明的变量被覆盖的情况，在刷新后可能需要保留其状态。 - PassKit
3除非你对代码非常小心，否则这将导致内存泄漏，其中你在替换所附加的代码之前没有解除附加的事件处理程序等。 - Lucy Llewellyn
我正在使用这个工具每秒重新加载我们的仪表板，零闪烁！这是穷人版的comet/json api。感谢@DanielLlewellyn等人的警告。 - William Entriken
该方法存在一些小问题，参见：https://stackoverflow.com/questions/21761931/google-hosted-libraries-is-unnecessarily-using-cache-breakers/21761975?noredirect=1#21761975 - William Entriken
5有一些人评论说，这种方法只刷新页面的一部分很有用，但其实不是这样的。我认为这些人误解了
$.ajax的context参数并期望它能够执行某种魔法。它所做的只是设置回调函数的this值。发送到"" URL的Ajax将命中当前页面的URL，因此通常会加载完整的HTML（包括<html>、<head>和<body>），而本答案中没有过滤掉您不想要的东西。 - Mark Amery显示剩余2条评论
114
如果当前页面是通过POST请求加载的，您可能希望使用
window.location = window.location.pathname;
取代
window.location.reload();
因为window.location.reload()在一个由POST请求加载的页面上被调用时会提示确认。
- SumairIrshad
2
13然而，使用window.location = window.location会失去查询字符串，而不使用则不会。 - mrmillsy
1@mrmillsy
window.location = window.location 也不完美，因为如果当前 URL 中有 fragid（hashbang），它将无效。 - Mark Amery74
你有多种选择；以下任何一个都可以工作：
window.location.href = window.location.href;window.location.reload();history.go(0);
- JohnP
58
你可能想要使用
location.reload(forceGet)
forceGet 是一个可选的布尔值。
默认为 false，它会从缓存中重新加载页面。
如果您想强制浏览器从服务器获取页面以清除缓存，请将此参数设置为 true。
或者只需
location.reload()
如果您想要快速且带有缓存的解决方案。
- Pinch
46
三种具有不同缓存相关行为的方法：
location.reload(true)在实现
location.reload()的forcedReload参数的浏览器中，通过获取页面及其所有资源（脚本、样式表、图像等）的新副本来重新加载。不会从缓存中提供任何资源 - 从服务器获取新的副本，而不发送任何if-modified-since或if-none-match头部请求。在支持“硬重载”的浏览器中，相当于用户执行了此操作。
请注意，在 Firefox （参见 MDN）和 Internet Explorer（参见 MSDN）中，将
true传递给location.reload()是受支持的，但并非普遍受支持，也不是 W3 HTML 5 规范、W3 HTML 5.1 草案规范 或 WHATWG HTML Living Standard 的一部分。在不支持的浏览器中，例如 Google Chrome，
location.reload(true)的行为与location.reload()相同。location.reload()或location.reload(false)重新加载页面，获取一个新鲜的、非缓存的页面HTML副本，并对浏览器缓存的任何资源（如脚本）执行RFC 7234验证请求，即使它们是新鲜的，RFC 7234允许浏览器在不重新验证的情况下提供它们。
至于当执行
location.reload()语句时，浏览器应该如何使用其缓存是没有明确规定或记录的，我通过实验确定了上述行为。这等同于用户在浏览器中单击“刷新”按钮。
location = location（或其他无限可能的涉及分配给location或其属性的技术）仅当页面的URL不包含fragid/hashbang时才起作用！
重新加载页面，而不从缓存中重新获取或验证任何新鲜的资源。如果页面的HTML本身是新鲜的，则会重新加载页面而不执行任何HTTP请求。
这相当于从缓存的角度来看，用户在新选项卡中打开页面。
但是，如果页面的URL包含哈希，则此操作将无效。
同样，这里的缓存行为也没有得到明确规定；我是通过测试确定的。
因此，在概括一下，您要使用：
location = location以最大程度地利用缓存，只要页面的URL没有哈希，否则它将不起作用。location.reload(true)会获取所有资源的新副本，而不重新验证（尽管在某些浏览器如Chrome中，它与location.reload()没有区别）。location.reload()可以忠实地复制用户点击“刷新”按钮的效果。
- Mark Amery
2
+1 for location = location;
虽然它比大多数提供的答案更短，但似乎没有多少人建议使用它，唯一的缺点可能是可读性不太好，而location.reload()则更具语义。 - brandito
更重要的是，如果URL中有哈希标识符，则“location = location”无法正常工作。对于任何使用片段标识符的站点，甚至对于任何可能向页面添加片段标识符的站点，都会导致其出现故障。 - Mark Amery
27
window.location.reload() 会从服务器重新加载并再次加载所有数据、脚本、图像等。
因此，如果你只想刷新 HTML，window.location = document.URL 将更快地返回并减少流量。但如果 URL 中有一个哈希符号（#），它将不会重新加载页面。
- user762330
1
这种行为至少在Chrome中是正确的 -
location.reload()即使没有参数也会强制重新验证缓存资源，而window.location = document.URL只要缓存资源仍然新鲜，就可以愉快地提供缓存资源而不需要访问服务器。 - Mark Amery网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
window.location.href=window.location.href;和location.href=location.href;有用。 - twharmonwindow.location.reload(true);会进行硬刷新，否则默认为false。 - Sagar Naliyaparawindow.location.reload()！ - user9258013location.reload(true)中的额外参数并不是标准的，但大多数浏览器都支持它。在MDN文档中有一些讨论和历史记录。"...从未成为任何已发布的 location.reload() 规范的一部分"。 - Dr. Red