Question

假设我在名为/example#myanchor1的网页上，其中myanchor是网页中的锚点。我想链接到/example#myanchor2，但在执行此操作时强制重新加载页面。

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

我该怎么做？ JS没问题。

Answer 1

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

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

代替$random插入一个随机数（假设“dummy”不是服务器端解释）。我确定有一种方法可以在设置锚点后重新加载页面，但是可能更难以简单地对正在设置的锚点作出反应并在那时做你需要的东西。

然后，如果你以这种方式重新加载页面，你可以将myanchor2作为查询参数，然后渲染你的东西服务器端。

修改的
请注意，上面的链接将在所有情况下重新加载，如果您只需要重新加载（如果您尚未在页面上），则需要使虚拟变量更具可预测性，如此

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

我仍然建议只监控哈希值。

Answer 2

像那样简单

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

an example

Answer 3

如果您要继续不断地重新加载页面，那么使用客户端JS有什么意义呢？即使页面没有重新加载，也可以更好地监视哈希的更改。

This page有一个哈希监控库和一个jQuery插件。

如果你真的想重新加载页面，为什么不使用查询字符串（？foo）而不是哈希？

Answer 4

尚未提及的另一个选项是将事件侦听器（例如，使用jQuery）绑定到您关心的链接（可能是所有链接，可能不是）并获取侦听器打电话给你使用的任何功能。

在评论后修改

例如，您的HTML中可能包含以下代码：

<a href="example#myanchor1" class="myHash">example1</a>
<a href="example#myanchor2" class="myHash">example2</a>
<a href="example#myanchor3" class="myHash">example3</a>

然后，您可以添加以下代码来绑定并响应链接：

<script type="text/javascript">
    $('a.myHash').click(function(e) {
        e.preventDefault(); // Prevent the browser from handling the link normally, this stops the page from jumping around. Remove this line if you do want it to jump to the anchor as normal.
        var linkHref = $(this).attr('href'); // Grab the URL from the link
        if (linkHref.indexOf("#") != -1) { // Check that there's a # character
            var hash = linkHref.substr(linkHref.indexOf("#") + 1); // Assign the hash to a variable (it will contain "myanchor1" etc
            myFunctionThatDoesStuffWithTheHash(hash); // Call whatever javascript you use when the page loads and pass the hash to it
            alert(hash); // Just for fun.
        }
    });
</script>

请注意，我正在使用jQuery class selector来选择我想要“监控”的链接，但您可以使用您想要的任何selector。

根据您现有代码的工作方式，您可能需要修改传递给它的方式/内容（也许您需要构建包含新哈希的完整URL并将其传递给它 - 例如。http://www.example.com/example#myanchor1 ），或修改现有代码以接受从新代码传递给它的内容。

Answer 5

另一种方法是设置网址，并使用window.location.reload()强制重新加载。

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

基本上，setTimeout会延迟重新加载。由于onclick中没有return false，因此会执行href。然后，href更改网址，然后才重新加载网页。

不需要jQuery，这是微不足道的。

Answer 6

这就像我做的那样（其中“anc”不用于其他任何东西）：

<a href="/example?anc=myanchor2"></a>

并加载：

window.onload = function() {
    var hash = document.location.hash.substring(1);
    if (hash.length == 0) {
        var anc = getURLParameter("anc");
        if (anc != null) {
            hash = document.location.hash = anc;
        }
    }
}

getURLParameter函数来自here

Answer 7

受another answer启发的我最喜欢的解决方案是：

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

我们不会遵循

href链接，因此您可以使用自己的偏好设置，例如：""或"#"。

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

Answer 8

尝试一下对我有帮助

<a onclick="location.href='link.html'">click me</a>

在您的锚标记中，而不是

<a href="link.html">click me </a>

Answer 9

如另一个答案中所建议，监视散列也是一种选择。我最终像这样解决了它，因此它需要最少的代码更改。如果我问了最初的问题，我相信我会很乐意看到此选项的完整解释。

附加的好处是，它允许在两种情况下（散列更改或页面加载）使用附加代码。它还允许您使用自定义哈希手动调用哈希更改代码。我使用jQuery是因为它使哈希更改检测变得轻而易举。

在这里！

将检测到哈希值时触发的所有代码移动到单独的独立函数中：

function openHash(hash) {

  // hashy code goes here

  return false; // optional: prevents triggering href for onclick calls
}

然后在两种情况下都检测您的哈希：

// page load
$(function () {
  if(typeof location.hash != typeof undefined) {
    // here you can add additional code to trigger only on page load
    openHash(location.hash);
  }
});

// hash change
$(window).on('hashchange', function() {
  // here you can add additional code to trigger only on hash change
  openHash(location.hash);
});

您现在也可以像这样手动调用代码

<a href="#" onclick="openHash('super-custom-hash')">Magic</a>

希望这对任何人都有帮助！

Answer 10

尝试添加简单的问号：

<a href="?#anchor2">Going to Anchor2 with Refresh</a>

Answer 11

如果您需要使用相同锚点重新加载页面，并希望浏览器返回到该锚点，则不会。它将返回到用户的上一个滚动位置。

设置一个随机锚，覆盖它，然后重新加载似乎可以解决。不确定原因。

var hash = window.location.hash;
window.location.hash = Math.random();
window.location.hash = hash;
window.location.reload();

使用html锚点强制页面重新加载（＃） - HTML＆amp; JS

11 个答案: