javascript 无需重新加载页面即可更新 URL 哈希
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11552993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Updating URL hash without page reload
提问by DaneSoul
<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>
If we are now on test.htm#1 and click link #2, alert shows 1 number, not 2, and after this hash in URL is changed to 2. When you next click 3, it will show prevouse 2, and so on.
如果我们现在在 test.htm#1 并单击链接 #2，警报显示 1 个数字，而不是 2，并且在 URL 中的此哈希更改为 2 之后。当您下次单击 3 时，它将显示 prevouse 2，依此类推.
There is the problem for me, because I use hash for scrolling my page content on fixed height (can't use anchors due to architecture issues), and with such behavour after clicking link scroll will happened only on second click, what is completely wrong.
对我来说有问题，因为我使用哈希在固定高度滚动我的页面内容（由于架构问题不能使用锚点），并且单击链接后的这种行为只会在第二次单击时发生，这是完全错误的.
QUESTION: How can I update hash and take updated (not previouse) value for further use, without reloading page in browser (all content for scrolling already on page, reload it from server isn't good solution).
问题：如何更新哈希并获取更新的（不是先前的）值以供进一步使用，而无需在浏览器中重新加载页面（所有滚动内容已经在页面上，从服务器重新加载不是一个好的解决方案）。
回答by sabithpocker
Not exactly cross browser, but you can get cross browser hashchange workarounds if you want,
不完全跨浏览器，但如果你愿意，你可以获得跨浏览器的 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>
using bind: http://jsfiddle.net/KdqWK/1/
使用绑定：http: //jsfiddle.net/KdqWK/1/
using on: http://jsfiddle.net/KdqWK/2/
回答by tgvrs santhosh
Instead of calling curHash in onclick, call it in href after setting hash.. please find the following code..
而不是在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>
回答by inhan
I would use the onpopstateand onhashchangeevent listeners:
我会使用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>
回答by roycable
You can set the hash value of a URL
您可以设置 URL 的哈希值
window.location.hash = '#newhash';
You could also just use a JS variable to store what link was clicked and pass that into your code... unless I'm misunderstanding the question.
您也可以只使用 JS 变量来存储点击的链接并将其传递到您的代码中......除非我误解了这个问题。
