[英]How to use browser back functionality to close a layer?
I am opening a full page layer for filtering upon button click.我正在打开一个完整的页面层,以便在单击按钮时进行过滤。 One can close it via button, but some do use the navigation functionality of the browser which then loads the last page instead of the on that opened it.
可以通过按钮关闭它,但有些确实使用浏览器的导航功能,然后加载最后一页而不是打开它的页面。
To fix this, I saw that there are 2 approaches.为了解决这个问题,我看到有两种方法。 One with hash and one with browser state.
一种带有哈希值,一种带有浏览器状态。
The browser state does not close the layer for me on the back button, just changes the URL so I am trying the hash option.浏览器状态不会在后退按钮上为我关闭图层,只是更改了 URL,所以我正在尝试哈希选项。
While it works, there is the problem that I do have multiple layers to call for example a search layer.虽然它有效,但问题是我确实有多个层可以调用例如搜索层。
// 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();
} );
How can I support the browser back function, while using multiple layers?使用多层时,如何支持浏览器返回功能?
You could create a function that checks the hash and then toggles the appropriate layer using a switch
for example.例如,您可以创建一个函数来检查散列,然后使用
switch
切换适当的层。
Then you call that function on both load
and hashchange
events.然后在
load
和hashchange
事件上调用该函数。
You'd have something like:你会有类似的东西:
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
}
}
And on the hashchange
event you call parseHash()
在
hashchange
事件上你调用parseHash()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.