时间戳

首页 > 解决方案 > 如何使用浏览器返回功能关闭图层？

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();
} );

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

标签： javascriptjquery

解决方案

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

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()

推荐阅读