在不重新加载页面的情况下更新URL哈希值

Question

在不重新加载页面的情况下更新URL哈希值

3

<script>
function CurHash(){
    var id = parseInt(window.location.hash.replace("#", ""));
    alert(id);
}
</script>

<!-- START URL: test.htm#1 -->
<a href='#1' onClick='CurHash()'>#1</a>
<a href='#2' onClick='CurHash()'>#2</a>
<a href='#3' onClick='CurHash()'>#3</a>

如果我们现在在test.htm＃1上，点击链接＃2，警报显示数字1，而不是2，并且在URL中的哈希值更改为2。当您下次单击3时，它将显示先前的2，依此类推。

对我来说存在问题，因为我使用哈希来滚动我的页面内容（由于架构问题无法使用锚点），并且在这种行为之后，单击滚动将仅在第二次单击时发生，这是完全错误的。

问题：如何更新哈希并获取更新（而不是以前的）值以供进一步使用，而无需在浏览器中重新加载页面（所有用于滚动的内容已经在页面上，从服务器重新加载它不是好的解决方案）。

- DaneSoul

1

只是想让你知道原因：因为“onclick”事件在哈希更新之前触发。 - Ryan Wheale

4个回答

1

我会使用 onpopstate 和 onhashchange 事件监听器：

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">

    if (typeof window.onpopstate != 'undefined') {
        window.onpopstate = curHash;
    } else if (typeof window.onhashchange != 'undefined') {
        window.onhashchange = curHash;
    }

    function curHash() {
        var h = window.location.hash;
        if (h == '') return; // no hash. this is probably the first load
        h = h.substr(1); // hash always starts with #
        alert('hash: ' + h);
    }

</script>
</head>

<body>
<ul style="margin:0; padding:0;">
    <li><a href="#1">Click here for 1</a></li>
    <li><a href="#2">Click here for 2</a></li>
    <li><a href="#3">Click here for 3</a></li>
    <li><a href="#4">Click here for 4</a></li>
</ul>
</body>
</html>

- inhan

我应该如何从链接的OnClick中调用您的代码？我认为我做错了什么，无法使您的代码工作... - DaneSoul

我已更新我的回答。我需要使用 typeof 运算符，抱歉误导了您。 - inhan

1

请在设置哈希后，在href中调用curHash，而不是在onclick中调用。请查找以下代码：

<a href='javascript:location.hash="#1";CurHash();'>#1</a>
<a href='javascript:location.hash="#2";CurHash();'>#2</a>
<a href='javascript:location.hash="#3";CurHash();'>#3</a>

- tgvrs santhosh

哦，这是一个有趣的解决方案！以前没有见过这样的语法，但它确实有效！ - DaneSoul

1

这不是一个好的解决方案，因为代码很糟糕。你应该使用标准的链接href来更新哈希，并使用库来监听哈希改变事件（http://bit.ly/7W6mrl）。 - Ryan Wheale

-1

您可以设置URL的哈希值

window.location.hash = '#newhash';

你也可以使用JS变量来存储被点击的链接，并将其传递到你的代码中...除非我误解了问题。

- roycable

5

这将重新加载页面，而这恰恰不是想要的。 - mikus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sabithpocker · Accepted Answer

虽然不是完全的跨浏览器，但是如果你想要实现跨浏览器的hashchange解决方案，是有办法的。

<script>
$(window).on('hashchange load',function(){
    var id = parseInt(window.location.hash.replace("#", ""));
    alert(id);
});
</script>

<!-- START URL: test.htm#1 -->
<a href='#1'>#1</a>
<a href='#2'>#2</a>
<a href='#3'>#3</a>

使用bind方法: http://jsfiddle.net/KdqWK/1/

使用on方法: http://jsfiddle.net/KdqWK/2/