我是第一次玩历史对象。 我有下面的代码,我一直在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填充了什么吗?
当你使用 pushState
你是在推销"当前 状态"(浏览器实际上并不保存页面的状态。 它只是将作为第1个参数传递给它的对象关联到 pushState
与历史中的页面)到浏览器的历史堆栈中。 当您浏览到历史堆栈中的那个页面时,您推送的对象将出现(在 onpopstate
).
(注意:你可以通过任何可以是 JSON.stringify
受雇于 pushState
.)
你回到了历史中的一个页面,但该页面并没有被添加到与 pushState
所以它没有 "状态"。
在点击 "返回 "后,试着按下浏览器中的 "前进 "按钮。 你会看到 event.state
不是 null
然后。
所以,你传递的对象是链接到历史堆栈中被推送的页面,你只有访问历史中的那个页面时才会看到它。
这是一个思路。
我在工作中遇到了同样的问题 达特 编程语言。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)
});