使用哈希更改历史记录不会触发函数，也不会使用后退按钮进行更改

Change history using hash doesn't trigger a function neither changing with back button

本文关键字：按钮 历史 哈希更 记录 函数      更新时间：2023-09-26

我正在使用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是背景（bg图像）的css类。我阻止刷新按钮（保存BG）与哈希：

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

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

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

要正确操作历史记录堆栈，您需要使用令人敬畏的历史 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')">
相关文章：