首先,我不完全确定我在做什么或期待什么是正确的。似乎没有太多关于此的文档,但我读过的内容表明这应该可行。
我在尝试使用 history.pushState 时遇到了一些问题,所以我最终制作了一个演示页面来看看出了什么问题。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
<script>
window.onpopstate = function()
{
var d = new Date;
console.log(d.toString());
console.log(document.location.href);
};
$(document).ready(function()
{
$('#push').click(function()
{
var rand = Math.random();
history.pushState( {'number':rand} , 'Test '+rand , '/test/'+rand );
return false;
});
});
</script>
</head>
<body>
<a href="#" id="push">New state</a>
</body>
</html>
当我单击“新状态”链接时,我希望在控制台中看到 onpopstate 函数已被触发,并且我会看到一个新的 url(类似于 test/[number])。
chrome 地址栏中的位置确实会更新,但不会触发 onpopstate 事件。然后,当我单击浏览器中的后退按钮时,看起来多个 popstate 事件正在触发。似乎每次我使用浏览器导航按钮时,每个应该触发的 popstate 事件都会同时发生。
这有点难以解释。这是我希望在控制台中看到的内容。
加载页面。Chrome 在页面加载时触发初始 popstate 事件
popstate.html:132011 年 11 月 19 日星期六 16:23:48 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/popstate.html
单击“新状态”链接。地址栏中的位置更新为http://example.com/test/0.06458491436205804。
2011 年 11 月 19 日星期六 16:23:53 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/test/0.06458491436205804
单击浏览器中的后退按钮。地址栏的url返回/popstate.html
popstate.html:132011 年 11 月 19 日星期六 16:26:27 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/popstate.html
这就是我所期待的。这是我实际看到的...
加载页面
popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/popstate.html
单击新状态链接。控制台中什么也没有出现。地址栏更改为 /test/0.5458911096211523
单击浏览器中的返回按钮。地址更改回 /popstate.html
popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/popstate.html
popstate.html:132011 年 11 月 19 日星期六 16:28:57 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/popstate.html
如您所见,它重复初始 popstate 并显示返回到 /popstate.html,但它永远不会为 push 状态触发。如果我现在在浏览器中按前进,我会得到:
popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/popstate.html
popstate.html:132011 年 11 月 19 日星期六 16:28:57 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/popstate.html
popstate.html:132011 年 11 月 19 日星期六 16:29:58 GMT+0000(GMT 标准时间)
popstate.html:14http://example.com/test/0.5458911096211523
(它们都再次出现,这里是截图:http: //img.ctrlv.in/4ec7da04e20d3.jpg)
我不知道是我做错了,我的期望是错误的,还是这实际上是一个错误?
提前感谢所有阅读了所有这些内容并可以为我提供一些启示的人。