Javascript 如何使用浏览器后退功能关闭图层？

我打开一个完整的页面层，点击按钮进行过滤。用户可以通过按钮关闭它，但有些用户使用浏览器的导航功能，然后加载最后一页，而不是打开它的页面

为了解决这个问题，我发现有两种方法。一个具有哈希，一个具有浏览器状态

浏览器状态不会在“后退”按钮上为我关闭图层，只是更改URL，以便我尝试使用哈希选项

虽然它可以工作，但有一个问题，我确实有多个层可以调用，例如搜索层

// show/hide filter layer
var filter_layer_toggle = function() {
    // window.history.pushState('page2', 'Title', '/page2.php');
    $("#btn_save_search").toggle()
    // more happening here
}
//this needs to be called on another event
var search_layer_toggle = function() {
    // toggles search layer elements
}
$("#filter_button, #btn_fltr").on("click", function(){
    window.location.hash = "filter";
});
document.location.hash = '';
$( window ).on( 'hashchange', function( e ) {
    filter_layer_toggle();
} );

---

如何在使用多个层时支持浏览器返回功能？

您可以创建一个检查哈希值的函数，然后使用开关切换适当的层，例如

然后对

load

和

hashchange

事件调用该函数

你会有类似于：

function parseHash() {
  switch(window.location.hash) {
    case '#filter':
      filter_layer_toggle();
      break;
    case '#search':
      search_layer_toggle();
      break;
    default:
     // proceed with the not layered page
  }
}

---

如果我没有弄错的话，在调用

hashchange

事件的

parseHash（）

上，重新加载页面时不会触发

onhashchange

。您可以添加一个加载事件来检查哈希值，如果它与您添加的哈希值匹配，在本例中为“popup\u opend”，您可以切换弹出窗口。谢谢。我同时编辑了这个问题，因为主要的问题似乎是不能用这种方法处理超过一层。