我正在使用 JavaScript 更改某些链接的背景:
$(document).ready(function(){
$("#home").click( function(){
$("body").removeClass("bg2 bg3").addClass("bg1");
});
$("#link1").click( function(){
$("body").removeClass("bg1 bg3").addClass("bg2");
});
$("#link2").click( function(){
$("body").removeClass("bg1 bg2").addClass("bg3");
});
});
Bg1,2,3 是背景的 css 类(bg 图像)。我用哈希阻止刷新按钮(保存 BG):
var x = location.hash;
if (x==="#link1")
{
$ ("body").removeClass("bg1 bg3").addClass("bg2");
}
else if (x==="#link2")
{
$ ("body").removeClass("bg1 bg2").addClass("bg3");
}
});
它可以工作，但如果我单击后退按钮，它不会将背景更改为上一个链接背景。除了网络存储/ session 存储之外，是否可以修复它？用散列还是类似这样的东西？
最佳答案
当您点击浏览器的后退按钮时，页面将不会重新加载，因为您正在使用哈希，这意味着浏览器您想移动到不同的 anchor 。
要正确操作历史堆栈，您需要使用非常棒的 History API
要解决您的问题，您需要拦截历史堆栈更改时触发的事件。
<html>
<head>
<script type="text/javascript" src="../lib/jquery.1.9.2.js"></script>
</head>
<body onload="checkHash();">
testing hash stuff
<a href="#white">click to change</a>
<script type="text/javascript">
console.log('loaded');
var checkHash = function(){
if(location.hash==="#black"){
$('body').css("background-color","black");
}else if(location.hash==="#white"){
$('body').css("background-color","white");
}
}
//the event below will be trigger when you hit backbutton or the link
window.addEventListener("popstate", function(e) {
console.log('trigger when hit the back button')
checkHash();
});
</script>
</body>
</html>
IE9 修复
如果您需要在 IE9 上实现相同的行为，您必须监听 onhashchange，这样您就可以在单击后退按钮时触发代码更改背景。
<body onhashchange="alert('trigger the background change function')">
关于javascript - 使用散列的更改历史不会触发函数，也不会使用后退按钮进行更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22881253/