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

【问题标题】：Updating URL hash without page reload在不重新加载页面的情况下更新 URL 哈希
【发布时间】：2012-07-19 02:10:49
【问题描述】：

<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，alert 会显示 1 个数字，而不是 2，并且在 URL 中的这个哈希更改为 2 之后。当您下次单击 3 时，它将显示 prevouse 2，等等。

这对我来说是个问题，因为我使用哈希在固定高度上滚动我的页面内容（由于架构问题不能使用锚点），并且点击链接后这种行为只会在第二次点击时发生滚动，什么完全错误。

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

【问题讨论】：

只是想让您知道为什么：因为“onclick”事件在哈希更新之前触发。

标签： javascript jquery url

【解决方案1】：

不完全是跨浏览器，但您可以根据需要获得跨浏览器的 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>

使用绑定： http://jsfiddle.net/KdqWK/1/

使用： http://jsfiddle.net/KdqWK/2/

【讨论】：

这适用于哪些浏览器？我在 FF、Chrome 和 Opera 中尝试过但没有成功...
@DaneSoul 请检查我刚刚添加的小提琴
@DaneSoul on 我猜需要 atleat 1.7.1，否则使用绑定

【解决方案2】：

不要在onclick中调用curHash，而是在设置hash后在href中调用..请找到以下代码..

<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>

【讨论】：

哦，这是一个有趣的解决方案！以前没见过这样的语法，但这有效！
这不是一个很好的解决方案，因为代码很草率。您应该使用标准链接 href 来更新哈希，并使用库来监听 hashchange 事件 (bit.ly/7W6mrl)。

【解决方案3】：

我会使用 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>

【讨论】：

我应该如何从 OnClick 在链接上调用您的代码？我认为我做错了什么，无法使您的代码正常工作...
我已经更新了我的答案。我需要typeof 运算符，抱歉误导。

【解决方案4】：

您可以设置网址的哈希值

window.location.hash = '#newhash';

您也可以只使用 JS 变量来存储单击的链接并将其传递到您的代码中...除非我误解了这个问题。

【讨论】：

这会重新加载页面，这正是不想要的