Question

我第一次玩历史对象。我有以下代码，我一直在测试chrome：

<!DOCTYPE html>
<html>
        <head>
                <script type="text/javascript">

window.addEventListener('popstate', function(event) {
  console.log('popstate fired!');
   console.log(event.state);

});

function showbox()
{
   document.getElementById('box').style.display = 'block';
   history.pushState({somethinggoeshere:'but what?'}, 'I put text here, but how do i verify the browser has received it?', '?showbox=true');
}
                </script>
        </head>
        <body>
                <a onclick="showbox();">Show box</a>
                <div id="box" style="background:red; height:100px; display:none;"></div>
        </body>
</html>

当我点击链接显示框时，会出现一个红色框。当我单击chrome浏览器窗口中的后退按钮，然后查看console.log，event.state为null。为什么它为空？我不是用history.pushState吗？

填充它

Answer 1

当您使用pushState时，您正在推送页面的“当前状态”（浏览器实际上并不保存页面状态。它只关联传递的对象作为历史中页面的pushState的第一个参数）到浏览器的历史堆栈中。当您浏览到历史堆栈中的该页面时，您推送的对象将出现（在onpopstate中）。

（注意：您可以将JSON.stringify的任何内容传递给pushState。）

您回到了历史记录中的某个页面，但该页面未添加pushState，因此没有“状态”。

点击“返回”后，尝试在浏览器中按“向前”按钮。您会看到event.state当时不是null。

因此，您传递的对象链接到推入历史堆栈的页面，并且只有在历史记录中访问该页面时才会看到它。

Answer 2

这是一个思考的想法。

使用Dart编程语言时，我遇到了同样的问题。PopStateEvent侦听器在事件状态参数中提供了null。我已经通过使用HashChangeEvent侦听器解决了这个问题。在浏览器中按“返回”按钮后，HashChangeEvent侦听器启动，提供有用的信息。

window.onHashChange.listen((event) {
    var e = event as HashChangeEvent;
    var newUrl = e.newUrl;
    var oldUrl = e.oldUrl;
      // please, navigate to the "state" (old history location)

  });

html 5中的history.state历史对象为null

2 个答案: