使用html锚点强制页面重新加载(#) - HTML和JS

Question

假设我在一个名为"页面/example#myanchor1中myanchor的锚点"的页面上.我想链接到/example#myanchor2,但强制页面重新加载,同时这样做.

原因是我运行js来检测页面加载时url的锚点.这里的问题(通常是预期的行为)是,浏览器只是将我发送到页面上的特定锚点而不重新加载页面.

我该怎么做呢？JS没关系.

Answer 1

我建议监视URL中的锚点以避免重新加载,这几乎就是使用锚点来控制流量.但仍然在这里.我想说使用简单的锚链接强制重新加载的最简单方法就是使用

<a href="?dummy=$random#myanchor2"></a>

其中代替$random插入一个随机数(假设"虚拟"不解释服务器端).我确定有一种方法可以在设置锚点后重新加载页面,但是可能更难以简单地对正在设置的锚点做出反应并在那时做你需要的东西.

再说一次,如果你以这种方式重新加载页面,你可以把它myanchor2作为一个查询参数,然后渲染你的东西服务器端.

编辑
请注意,上面的链接将在所有情况下重新加载,如果您只需要重新加载,如果您还没有在页面上,则需要使虚拟变量更具可预测性,如此

<a href="?dummy=myanchor2#myanchor2"></a>

我仍然建议只监视哈希.

Answer 2

很简单

<a href="#hardcore" onclick="location.reload()">#hardcore</a>

一个例子

Answer 3

我最喜欢的解决方案，受到另一个答案的启发是：

<a href="#myanchor2" onclick="location.hash='myanchor2'; location.reload();">myanchor2</a>

href链接将不会被跟随，因此您可以使用自己的偏好，例如：""或"#"。

尽管我喜欢接受的答案，但我发现这更优雅，因为它没有引入外部参数。@Qwerty 和 @Stilltorik 的答案都导致哈希在我重新加载后消失。

Answer 4

这样做的另一种方法是设置URL，并用于window.location.reload()强制重新加载。

<a href="/example#myanchor2" 
    onclick="setTimeout(location.reload.bind(location), 1)">
</a>

基本上，setTimeout延迟重新加载。由于return falseonclick中没有任何内容，因此href执行。然后，URL会被更改，href然后才重新加载页面。

不需要jQuery，这很简单。