Question

我将打开一个完整的页面层，以便在单击按钮时进行过滤。可以通过按钮将其关闭，但是有些人确实使用了浏览器的导航功能，然后加载了最后一页而不是打开页面的上一页。

要解决此问题，我发现有两种方法。一个带有哈希，另一个带有浏览器状态。

浏览器状态不会为我关闭后退按钮上的图层，只是更改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();
} );

在使用多层时如何支持浏览器后退功能？

Answer 1

您可以创建一个检查哈希的函数，然后使用switch切换适当的图层。

然后您同时在load和hashchange事件上调用该函数。

您会有类似的内容

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

在hashchange事件中，您致电parseHash()

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

1 个答案: