隐藏/显示“后退”上的元素(移动)

Question

我正在尝试建立我的第一个响应网站，但我需要移动设备上的“后退”按钮，不要回顾历史，而是为我做一个动作。

所以，我有一个：

HTML：

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

联署材料：

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

我需要“后退”按钮来做相反的操作，即：

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

有办法吗？

Answer 1

使用window历史堆栈，只要历史堆栈中的上一页是域上的页，就可以选择在回动作上执行想要执行的任何操作。

这是使用 / 实现的。

更重要的是事件popstate。

示例：

​

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

​

注意：

一种总是能够利用back操作的推荐方法是检查history堆栈，如果没有足够的状态弹出，只需打开几个push，就可以始终捕获back事件。就像这样：

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