Javascript：如何真正重新加载带有锚标记的网站？

Posted 2023-02-22

【中文标题】Javascript：如何真正重新加载带有锚标记的网站？

【英文标题】：Javascript: How to truly reload a site with an anchor tag?

【发布时间】：2011-01-20 02:42:08

【问题描述】：

以这段代码sn-p为例：

window.location.href = 'mysite.htm#images';

已经在站点 mysite.htm 上并通过 location.href 触发重新加载不会重新加载页面，而是跳转到 URL 中命名的锚点。

我需要一种机制来真正重新加载页面。有什么想法吗？

PS：我尝试了 location 的其他方法，但都没有成功:(

编辑 不要挂在文件类型htm 上。我也需要它用于动态网站。

【问题讨论】：

onclick="alert('Please press F5')"

所以你想重新加载页面，然后跳转到name-anchor？

@Pbirkoff 是的，完全正确。 @nickf 呵呵，你让我很开心：D

@nickf best location.reload 替代方案：D

【参考方案1】：

我发现@alemjerus 的回答会重新触发POST，如果这是最后一个请求：

window.location.reload(true)

我想要的是使用GET 从头开始​​刷新页面，所以我使用了this：

<a href="javascript:window.location.href=window.location.href">Refresh page</a>

【参考方案2】：

适用于大多数 Mozilla 浏览器

<a title="Reset this Document" href="javascript:void()" onclick="window.location.href='#'"><font color="red">Reset</font></a>

代码行：

window.location.href='#'
or window.location.href=''

最后的代码在IE下无法正常工作

【参考方案3】：

虽然我觉得 alemjerus 的回答是好的方向，但它在新 URL 指向不同的页面时不起作用，至少在我的 Chrome v40 上。

例如，当新的 URL 只是添加一个锚点时，它可以正常工作：

var redirectToURL = '/questions/2319004/javascript-how-to-truly-reload-a-site-with-an-anchor-tag#answer-28621360';
window.location.href = redirectToURL;
window.location.reload(true);

但是当它指向不同的页面时，用户在重新加载后仍然会停留在当前页面上。 （批量运行以下代码，location.href=和location.reload之间没有延迟）：

var redirectToURL = 'http://***.com';
window.location.href = redirectToURL;
window.location.reload(true);

在这种情况下，删除location.reload 作品。所以我的解决方法是检查新 URL 是否在同一页面上：

var urlParser = document.createElement('a');
urlParser.href = redirectToURL;
if (urlParser.origin + urlParser.pathname === location.origin + location.pathname) 
    window.location.reload(true);

在 Chrome 和 Safari 上测试过，没有尝试过 IE。如果它不适用于任何主流浏览器，请告诉我。

【参考方案4】：

将指定的 URL 设置到位置后，发出 window.location.reload(true)。这将强制浏览器重新加载页面。

【讨论】：

我发现这会导致页面重新加载页面的原始 URL，而不是刚刚设置的 URL。 （不过，我同意它应该像你描述的那样工作。）

这将导致浏览器完全重新加载带有 HTTP 标头 Pragma: no-cache 的 everything ，这会导致下载更多内容，但只是主机文档（通常是 html 页面）如预期的那样.

另请注意，根据developer.mozilla.org/en-US/docs/Web/API/Location/reload 的文档，reload() 不接受任何参数。

另请注意，根据规范，您可能根据用户代理从缓存中获取旧副本或从服务器获取新副本：html.spec.whatwg.org/multipage/history.html#dom-location-reload - 仅限规范表示“用户代理可能允许用户在重新加载时显式覆盖任何缓存。”

我发现如果这是之前的请求，这将重复 POST，而我想要 GET。因此，我从这里使用了<a href="javascript:window.location.href=window.location.href">：***.com/questions/8174282/…

【参考方案5】：

试试这个： window.location.href = 'mysite.htm?';

编辑：这只会在第一次工作；之后，缓存再次生效。

【参考方案6】：

使用 URL 的查询部分添加随机字符串：

// Use a timestamp to make sure the page is always reloaded
window.location.href = 'mysite.htm?r='+(+new Date())+'#images';

【参考方案7】：

您可能是骗子并附加一个随机查询字符串，重定向到“mysite.htm?random=289954034#images”。

但是如果这是一个静态页面，正如.htm 所暗示的那样，你需要重新加载什么？如果这样您的 onload Javascript 可以再次出现，也许您只需要更改应用程序的流程。

【讨论】：

不要让扩展欺骗你。您可以重写 url 以使它们看起来像 html 文件。

这是真的，但我很少看到重写器选择.htm 而不是.html。这就是为什么我选择“暗示”这个词:)

当 AJAX 发挥作用时，这与静态页面与动态页面无关。想想吧。

...嗯？如果您使用 AJAX，那么您不需要刷新页面......我可能不应该在不知道任何细节的情况下尝试分析其他人的系统 xD