Question

在这个示例中，我们设法使后退按钮工作，但前进按钮似乎是一个问题，当按下前进按钮时，#modal应该重新出现，但事实并非如此。有什么想法来解决它吗？

＆＃13;

$(window).bind('popstate', function() {
  $('#modal').hide();
});

$(".view").click(function() {
  history.pushState(null, null, null);
  $("#modal").show();
});

＆＃13;

#modal {
  position: relative;
  display: none;
  height: 100px;
  width: 100px;
  background-color: grey
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="view">Click</button>
<div id="modal"></div>

＆＃13;

Here is JSBin

谢谢！

Answer 1

您可以使用＆＃34; hash＆＃34;而不是＆＃34;历史＆＃34;

$(window).bind('popstate', function() {
  if(location.hash.indexOf('#modal') != -1)
      $('#modal').show();
  else
    $('#modal').hide();
});

$(".view").click(function(){
  location.hash ='#modal';
  $("#modal").show();
});

这是demo

Answer 2

将所有null推送到历史记录中，您不会以任何方式耦合页面的状态/视图。您是否意识到当您沿着堆栈向前移动时也会触发popstate事件？

大多数人倾向于使用称为＆＃34;路由＆＃34; 的相对网址（或片段）来解析历史记录/内容，但您也可以使用pushState的第一个参数添加数据 - 如何在更大范围内管理此机制超出了范围，但一个简单的示例如下：

$(window).bind('popstate', function() {
    var state = history.state || {};
    state.openModal ? $('#modal').show() : $('#modal').hide();
});

$(".view").click(function(){
    $('#modal').show();
    history.pushState({ openModal: true });
});

» demo

如何使用HTML5历史记录在此示例中使用前进按钮？

2 个答案: