如何使用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> 

这是JSBin

谢谢！

Answer 1

您可以使用“哈希”代替“历史记录”

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

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

这是一个演示

Answer 2

通过将所有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 });
});

»演示