隐藏/显示元素＆＃34;返回＆＃34; （移动）

Question

我正在尝试建立我的第一个响应式网站，但我需要＆＃34;返回＆＃34;移动设备上的按钮不能回溯历史，而是为我做一个动作 所以，我有这个：

HTML：

<div id='button1'></div>
<div id='button2'style='display: none;'></div>

JS：

$('#button1').click(function(){
  $('#button1').css('display', 'none');
  $('#button2').css('display', 'inline-block');
});

我需要＆＃34;后退按钮＆＃34;与此相反，即：

$('#button2').click(function(){
  $('#button2').css('display', 'none');
  $('#button1').css('display', 'inline-block');
});

有办法吗？

Answer 1

使用window历史记录堆栈，您可以选择在 后退操作 上执行您要执行的操作，只要在上一页中历史记录堆栈是您网域上 的页面 。

这是使用pushState() / popState()实现的。

更重要的是事件popstate。

实施例

window.onpopstate = function(event) {
  event.preventDefault()
  // DO some other action besides going back
  return false
}

注意：

始终能够利用后退操作的推荐方法是检查history堆栈，如果没有足够的状态可以弹出，只需push几个，所以你可以随时捕捉 后退活动 。像这样：

while (window.history.length < 5) {
  history.pushState({foo:1}, "Dummy poppable page", window.location.path)
}