window.location.href=window.location.href和window.location.reload()的区别

Question

JavaScript中的两种不同声明变量的方式之间有什么区别？

window.location.href = window.location.href

以及

window.location.reload()

函数？

- Brian

Answer 1

如果我没记错的话，window.location.reload()会使用POST数据重新加载当前页面，而window.location.href=window.location.href则不包括POST数据。

如下评论中@W3Max所指出的，如果URL中含有锚点（#），window.location.href=window.location.href将不会重新加载页面--在这种情况下必须使用window.location.reload()。

此外，正如@Mic所指出的，window.location.reload()接受一个额外的参数skipCache。使用window.location.reload(true)将跳过缓存并从服务器重新加载页面。window.location.reload(false)将执行相反的操作，并尽可能地从缓存中加载页面。

- David Johnstone

---

请注意，当您在使用window.location.reload()来刷新页面的同时进行POST请求时，浏览器会询问您是否要重新发送数据以重新加载页面。 - wimh

@Wimmel，有没有办法禁用这个消息？ - TheBoubou

如果URL中有锚点（#），则window.location.href=window.location.href不会重新加载页面。在这种情况下，您必须使用window.location.reload()。 - W3Max

请注意，location.reload() 也会强制重新加载所有静态内容（类似于按下 ctrl+f5 进行硬刷新），而将 location.href 设置回 href（或 pathname 或 URL）则不会，这可能在某些页面的加载时间上造成重大（且不必要的）差异。 - Rob Van Dam

@Wimmel Chrome：使用GET重新加载页面 Firefox：重新执行先前的请求，这意味着如果它是POST请求，您将会得到一个漂亮的弹出窗口询问是否要重新发送数据。 - Juri

Answer 2

如果你使用window.location.reload(true)，浏览器将跳过缓存并从服务器重新加载页面。window.location.reload(false)则相反。

注意：window.location.reload()的默认值为false。

- Mic

---

默认设置为false。 - Trevor

使用 Google Chrome 32 版本时，我在使用 webRTC 时遇到了 true/false 不起作用的问题。我有一个包含 webRTC 的 iframe，只有使用 window.location.href = window.location.href 才解决了这个问题。 - user285594

如果您在页面上更改了表单，则使用location.reload()或location.reload(false)时，更改可能会消失（恢复为缓存值），这取决于浏览器。要完全刷新页面，请使用location.reload(true)。 - Suncat2000

请注意，location.reload()的forceGet参数仅适用于Firefox！ - Venryx

Answer 3

区别在于

window.location = document.URL;

如果 URL 中包含一个哈希符号 (#)，无论后面是否跟有内容，页面都不会重新加载。

window.location.reload();

将重新加载页面。

- Fabien Ménager

---

并非所有浏览器都存在以哈希符号结尾的问题。如果您担心以哈希符号结尾的问题，请尝试使用以下代码：window.location = document.URL.replace(/#$/, ''); - Walter Stabosz

至少对于Chrome来说。我曾经认为location.href = location.href是理所当然的，但我刚刚注意到了确切的行为，并来到SO上传播这个消息。只需使用location.reload()即可。 - aaaaaa

你也可以使用window.location.pathname代替编写正则表达式。例如：window.location.replace(window.location.pathname); - Arseny

Answer 4

如果你在重新加载时添加布尔值true，则会从服务器重新加载：window.location.reload(true)

这个布尔值的支持情况不是很清楚，W3Org提到NS曾经支持过它。

在window.location.href和document.URL之间可能存在差异 - 至少在location.href和非标准且已弃用的document.location之间曾经存在差异，这与重定向有关，但那真的是上个世纪的事情了。

出于文档目的，我建议使用window.location.reload()，因为这是你想要做的操作。

- mplungjan

---

请查看https://dev59.com/DnE95IYBdhLWcg3wOLQ1#5091619，因为它解释了区别。 - jontro

Answer 5

如前所述，当 URL 中存在哈希符号（#）时，修改 href 不会重新加载页面。因此，我使用这种方法来重新加载页面，而不是使用正则表达式：

当有哈希符号(#)在URL中时，修改href将不会重新加载页面。因此，我使用此方法来重新加载页面，而不是使用正则表达式:

if (!window.location.hash) {
    window.location.href = window.location.href;
} else {
    window.location.reload();
}

- minterior

Answer 6

在研究IE（特别是IE9）的一些异常行为时，遇到了这个问题。似乎

window.location.reload();

刷新会导致整个屏幕一秒钟的空白，而

 window.location = document.URL;

刷新页面的速度更快，几乎不会被察觉。

经过更多的研究和一些使用Fiddler进行实验后，似乎无论是否传递布尔值，window.location.reload()都将绕过缓存并从服务器重新加载，包括再次获取所有资产（图像、脚本、样式表等）。因此，如果只想刷新HTML页面，则window.location = document.URL将更快地返回并且流量更小。

浏览器之间的行为差异在于，当IE9使用reload方法时，它会清除可见页面，并似乎从头开始重建页面，而FF和Chrome则会等待获取新的资产，并在资产不同时重建它们。

- invertedSpear

---

window.location = document.URL 会重新加载页面，就像 window.location.reload() 一样。是否有一种最先进的方法可以在不滚动到顶部或者像你所说的那样不知不觉地刷新页面呢？ - bigmugcup

Answer 7

Firefox（12.0版本）的一个不同之处在于，从POST渲染的页面上，reload()会弹出警告并重新提交POST请求，而URL赋值将执行GET请求。

Google Chrome对于两者都是执行GET请求。

- mrj

---

Chrome 38现在似乎使用POST来进行.reload()。 - Glen Little

Answer 8

使用JSF，当会话过期后我遇到了刷新问题：PrimeFaces ViewExpiredException after page reload 经过一些调查，我发现FireFox有一个差异：

调用window.location.reload()就像在FF中点击刷新图标一样，它添加了以下行：

Cache-Control max-age=0

而设置window.location.href就像在URL行中按ENTER键一样，它不发送该行。

虽然两者都被发送为GET请求，但是第一个（刷新）正在恢复先前数据，导致应用处于不一致状态。

- Danubian Sailor

Answer 9

不应该有问题。但是，在某些浏览器中可能存在差异，因此在某些情况下，其中一个（或两个都）可能无法正常工作。

- Olli

Answer 10

根据我三年的经验，我没有发现任何区别...

编辑：是的，正如这里的某个人所说，唯一的区别是将布尔参数传递给window.location.reload()。 如果你传递true，那么浏览器会加载一个新页面， 但如果传递false，则会加载缓存版本...

- kumarharsh