Question

我尝试使用pushState / popState来实现JS历史记录。前后导航工作正常，但我在使用浏览器的后退按钮进行初始页面加载之前导航时遇到问题。它需要额外点击浏览器的后退按钮才能离开页面。那是为什么？

function action(text) {
  history.pushState({"text":text}, text);
  doAction(text);
}

function doAction(text) {
  $('span').text(text);
}

var $button = $('button');
var $p = $('p');

$p.hide();

action("foo");
$button.on('click', function(){
  action("bar");
  $button.hide();
  $p.show();
})

window.addEventListener("popstate", function(e) {
  if (e.state !== null) {
      $button.show();
      $p.text("Next back should navigate away from this page");
  } else {
      $p.text("Still here? Why is that? Next back will really navigate away");
  }
});

https://jsfiddle.net/lilalinux/p8ewyjr9/20/

编辑：使用Chrome OS / X进行测试

Answer 1

初始网页加载不应使用history.pushState，因为它会添加其他历史记录条目。 alredy是一个隐含的第一个历史项，状态为null。

使用history.replaceState作为初始页面加载，设置该项目的状态，但不添加另一个。

var initialPageLoad = true;
function action(text) {
  if (initialPageLoad) {
    // replace the state of the first (implicit) item
    history.replaceState({"text":text}, text);
  } else {
    // add new history item
    history.pushState({"text":text}, text);
  }
  initialPageLoad = false;
  doAction(text);
}

function doAction(text) {
  $('span').text(text);
}

var $button = $('button');
var $p = $('p');

$p.hide();

action("foo");
$button.on('click', function(){
  action("bar");
  $button.hide();
  $p.show();
})

window.addEventListener("popstate", function(e) {
  if (e.state !== null) {
      $button.show();
      $p.text("Next back should navigate away from this page");
//  } else {
// won't happen anymore, as the first item has state now
//      $p.text("Still here? Why is that? Next back will really navigate away");
  }
});

JS：尝试导航回初始页面加载时出现错误的popstate事件

1 个答案: