javascript - 如何使用HTML5历史记录使前进按钮在此示例上起作用？

在此示例中，我们设法使后退按钮起作用，但前进按钮似乎是一个问题，当按下前进按钮时，应重新出现#modal，但没有出现。有解决的办法吗？

$(window).bind('popstate', function() {
  $('#modal').hide();
});

$(".view").click(function() {
  history.pushState(null, null, null);
  $("#modal").show();
});

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

<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>

Here is JSBin

谢谢！

最佳答案

通过将所有null推入历史记录，您不会以任何方式耦合页面的状态/视图。您是否知道当您沿着堆栈前进时也会触发popstate事件吗？

大多数人倾向于使用称为“路由”的相对URL（或片段）来解析历史记录/内容，但您也可以使用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