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

Question

在这个例子中，我们设法让后退按钮工作，但前进按钮似乎是个问题，当按下前进按钮时，#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

谢谢!

Answer 1

通过将所有 null 推送到历史记录中，您不会以任何方式耦合页面的状态/ View 。您是否知道 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