Question

我正在使用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图像）。我使用hash来阻止刷新按钮（以保存BG）：

   var x = location.hash;
      if (x==="#link1")
      {
         $ ("body").removeClass("bg1 bg3").addClass("bg2");
      }
      else if (x==="#link2")
      {
         $ ("body").removeClass("bg1 bg2").addClass("bg3");
      }
      });

它可以工作，但如果我点击后退按钮，它不会将背景更改为以前的链接背景。除了网络存储/会话存储之外，是否可以修复它？哈希或者像这样的想法？

Answer 1

当您点击浏览器的后退按钮时，页面将不会重新加载，因为您正在使用哈希，这意味着您要移动到另一个锚点的浏览器。

要正确操纵历史堆栈，您需要使用令人敬畏的真棒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 FIX

如果你需要在IE9上实现相同的行为，你必须听onhashchange，这样你就可以在点击后退按钮时触发代码来改变背景。

<body onhashchange="alert('trigger the background change function')">

使用哈希值更改历史记录并不会触发不使用后退按钮更改的功能

1 个答案: