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

Posted 2023-02-22

【中文标题】window.location.href=window.location.href 和 window.location.reload() 的区别

【英文标题】：Difference between window.location.href=window.location.href and window.location.reload()

【发布时间】：2011-01-25 04:41:45

【问题描述】：

javascript 的区别是什么

window.location.href = window.location.href

和

window.location.reload()

功能？

【参考方案1】：

如果您说window.location.reload(true)，浏览器将跳过缓存并从服务器重新加载页面。 window.location.reload(false) 会做相反的事情。

注意：window.location.reload() 的 default 值为 false

【讨论】：

@Ismail - 默认为 false。

Google Chrome 32，在使用 webRTC 时，真/假对我不起作用。我有一个带有 webRTC 的 iframe，只使用 window.location.href = window.location.href 就可以了。

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

请注意forceGet 的参数location.reload() 是only available in Firefox!

【参考方案2】：

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

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

此外，正如下面@Mic 所指出的，window.location.reload() 采用附加参数skipCache，因此使用window.location.reload(true) 时，浏览器将跳过缓存并从服务器重新加载页面。 window.location.reload(false) 会做相反的事情，并尽可能从缓存中加载页面。

【讨论】：

请注意，当您在 POST 上使用 window.location.reload() 时，浏览器会询问您是否要重新发送数据以重新加载页面

@Wimmel，有没有办法禁用此消息？

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

另请注意，location.reload() 还将强制重新加载所有静态内容（很像 ctrl+f5 样式的硬刷新），而将 location.href 设置回 href（或路径名或 URL）不会，这可能是某些页面上加载时间的显着（且不必要）差异。

@Wimmel Chrome：使用 GET 重新加载页面 Firefox：重新执行上一个请求，这意味着如果它是一个 POST，你会得到一个很好的弹出窗口，询问你是否重新发送数据或不是

【参考方案3】：

不，不应该。但是，某些浏览器可能存在差异，因此在某些情况下，任何一个（或两个都不）都可能不起作用。

【参考方案4】：

如果您将布尔值 true 添加到重新加载 window.location.reload(true) 将从服务器加载。

不清楚这个布尔值的支持程度，W3Org 提到 NS 曾经支持它

window.location.href 和 document.URL 的内容之间可能存在差异 - location.href 和非标准且已弃用的 document.location 至少曾经存在差异，这与重定向有关，但那确实是上个千年。

出于文档目的，我会使用window.location.reload()，因为这是您想要做的。

【讨论】：

看看***.com/a/5091619/429972，因为这解释了差异。

【参考方案5】：

根据我大约 3 年的经验，我找不到任何区别......

edit：是的，正如其中一位所说，仅将布尔参数传递给 window.location.reload() 是不同的。 如果你传递 true，那么浏览器会加载一个新页面， 但如果false，则缓存版本被加载...

【参考方案6】：

区别在于

window.location = document.URL;

如果 URL 中有一个井号 (#)（后面有或没有什么），则不会重新加载页面，而

window.location.reload();

将重新加载页面。

【讨论】：

并不是所有的浏览器都有这个结束哈希的问题。如果您担心结束哈希，请尝试：window.location = document.URL.replace(/#$/, '');

至少 Chrome 是相关的。我曾经认为location.href = location.href 是理所当然的，但我只是注意到了这种确切的行为并来到SO 传播这个词。只需改用location.reload()。

你也可以使用window.location.pathname来代替写这样的正则表达式。例如：window.location.replace(window.location.pathname);

【参考方案7】：

在研究 IE 中的一些异常行为时遇到了这个问题，特别是 IE9，没有检查旧版本。好像

window.location.reload();

导致刷新将整个屏幕空白一秒钟，其中

 window.location = document.URL;

刷新页面的速度更快，几乎在不知不觉中。

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

浏览器之间的行为差​​异是，当 IE9 使用 reload 方法时，它会清除可见页面并似乎从头开始重建它，其中 FF 和 chrome 等到它们获得新资产并在它们不同时重建它们。

【讨论】：

window.location = document.URL 像 window.location.reload() 一样重新加载页面。是否有一种最先进的刷新方式，无需滚动回顶部，或者如您所说的那样不知不觉？

【参考方案8】：

Firefox (12.0) 的不同之处在于，在从 POST 呈现的页面上，reload() 将弹出警告并重新发布，而 URL 分配将执行 GET。

谷歌浏览器对两者都进行了 GET。

【讨论】：

Chrome 38 现在似乎将 POST 用于 .reload()。

【参考方案9】：

使用 JSF，我现在在会话过期后遇到刷新问题：PrimeFaces ViewExpiredException after page reload 并且经过一些调查，我发现了 FireFox 的一个不同之处：

调用window.location.reload()就像点击FF上的刷新图标，它添加了一行

Cache-Control max-age=0

虽然设置window.location.href 就像在 URL 行中按 ENTER 一样，但它不会发送该行。

虽然两者都是作为 GET 发送的，但第一个（重新加载）是恢复以前的数据并且应用程序处于不一致状态。

【参考方案10】：

如前所述，当 url 中有哈希 (#) 时修改 href 不会重新加载页面。因此，我使用它来重新加载它而不是正则表达式：

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

【参考方案11】：

window.location.href，这就像在 android 5.1 的 webview 中救了我的命。在这个 Android 版本中，页面不会使用 location.reload() 重新加载。

【参考方案12】：

在我们的例子中，我们只想在 webview 中重新加载页面，但由于某些原因，我们无法找出原因！ 我们尝试了几乎所有网络上的解决方案，但使用 location.reload() 或 window.location.reload() 等替代解决方案无法重新加载， location.reload(true), ...！

这是我们的简单解决方案：

只需使用带有空“href”属性值的 标记，如下所示：

< a href="" ...>Click Me</a>

（在某些情况下，您必须在点击目标时使用“return true”来触发重新加载）

有关更多信息，请查看此问题： Is an empty href valid?