如何防止浏览器滚动到哈希值更改的顶部？ [英] How can I prevent the browser to scroll to the top on hash change?
问题描述
我正在构建一个Web应用程序，该应用程序需要防止浏览器历史记录中的向后导航。在StackOverflow中搜索线程后，我发现：
<！DOCTYPE html PUBLIC-// W3C // DTD XHTML 1.0 Transitional // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns = http://www.w3.org/1999/xhtml>
< title>无标题页面< / title>
< script type = text / javascript>
function changeHashOnLoad（）{
window.location.href + =＃;
setTimeout（ changeHashAgain（）， 50）;
}
函数changeHashAgain（）{
window.location.href + = 1;
}
var storageHash = window.location.hash;
window.setInterval（function（）{
if（window.location.hash！= storedHash）{
window.location.hash = storedHash;
}
} ，50）;
< / script>
< / head>
< body onload = changeHashOnLoad（）;>
尝试点击后退按钮！
< / body>
< / html>
我没有更改JavaScript中的任何内容。但是，在我的代码中使用此功能后，在访问该页面时我发现了另一个问题。网页正自动滚动到顶部，禁止查看页面的底部，同时也禁用其他一些功能。
有趣的是，该页面不是当我手动点击刷新按钮时显示此症状。我没有得到引起此问题的原因。
看，我的基本要求是阻止用户访问上一页。
请帮助我解决此问题。
我已经修改了代码。现在，它可以在所有现代浏览器（IE8及更高版本）中使用。
var storageHash = window.location.hash;
function changeHashOnLoad（）{
window.location.href + =＃;
setTimeout（ changeHashAgain（）， 50）;
}
函数changeHashAgain（）{
window.location.href + = 1;
}
函数restoreHash（）{
if（window.location.hash！= storedHash）{
window.location.hash = storedHash;
}
}
if（window.addEventListener）{
window.addEventListener（ hashchange，function（）{
restoreHash（）;
}，否）；
}
else if（window.attachEvent）{
window.attachEvent（ onhashchange，function（）{
restoreHash（）;
}）;
}
$（window）.load（function（）{changeHashOnLoad（）;}）;
I am building a web application where I need to prevent back navigation in the browser history. After searching the threads in StackOverflow I found this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>
Reference Disable browser's back button
I did not change anything in the JavaScript. However, after using this in my code, I am observing another problem while the page is being visited. The webpage is getting auto-scrolled to the top prohibiting viewing the bottom part of the page alongwith disabling of some other features also.
The interesting part is that the page is not showing this symptom when I manually hit the refresh button. I am not getting what is causing this issue.
See, my basic requirement is to stop users visiting the previous page. If any other alternative is there, that would also be welcome.
Please help me to fix this. Thanks in advance.
I have modified code. Now its works in all modern browsers, IE8 and above
var storedHash = window.location.hash;
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
function restoreHash() {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}
if (window.addEventListener) {
window.addEventListener("hashchange", function () {
restoreHash();
}, false);
}
else if (window.attachEvent) {
window.attachEvent("onhashchange", function () {
restoreHash();
});
}
$(window).load(function () { changeHashOnLoad(); });
这篇关于如何防止浏览器滚动到哈希值更改的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
