如何使用瀏覽器返回功能關閉圖層？

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:
     // proceed with the not layered page
  }
}

在hashchange事件上你調用parseHash()