html 5中的event.status历史对象为空。

问题描述 投票:4回答:2

我是第一次玩历史对象。 我有下面的代码,我一直在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为空。 为什么是空的? 我不是用history.pushState填充了什么吗?

javascript html history
2个回答
6
投票

当你使用 pushState你是在推销"当前 状态"(浏览器实际上并不保存页面的状态。 它只是将作为第1个参数传递给它的对象关联到 pushState 与历史中的页面)到浏览器的历史堆栈中。 当您浏览到历史堆栈中的那个页面时,您推送的对象将出现(在 onpopstate).

(注意:你可以通过任何可以是 JSON.stringify受雇于 pushState.)

你回到了历史中的一个页面,但该页面并没有被添加到与 pushState所以它没有 "状态"。

在点击 "返回 "后,试着按下浏览器中的 "前进 "按钮。 你会看到 event.state 不是 null 然后。

所以,你传递的对象是链接到历史堆栈中被推送的页面,你只有访问历史中的那个页面时才会看到它。


0
投票

这是一个思路。

我在工作中遇到了同样的问题 达特 编程语言。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)

  });
© www.soinside.com 2019 - 2024. All rights reserved.