在尝试使用history.pushState时遇到一些问题所以我最终制作了一个演示页面，以查看发生了什么问题。
<！DOCTYPE html> < html> < head> < meta http-equiv =Content-Typecontent =text / html; charset = utf-8> < title>无标题文档< / title> < script type =text / javascriptsrc =ajax.googleapis/ajax/libs/jquery/1.7.0/jquery.min.js><<< ; /脚本> < script> window.onpopstate = function（） { var d = new Date; console.log（d.toString（））; console.log（document.location.href）; }; $ b $（document）.ready（function（） { $ b $（'＃push'）。click（function（） { var rand = Math.random（）; history.pushState（{'number'：rand}，'Test'+ rand，'/ test /'+ rand）; return false; }）; }）; < / script> < / head> < body> < a href =＃id =push>新状态< / a> < / body> < / html>当我点击'新状态'链接时，我期望在控制台中看到onpopstate函数已被解雇，我会看到一个新的url（类似于test / [number]）。
chrome地址栏中的位置会更新，但onpopstate事件不会触发。 然后，当我点击浏览器中的后退按钮时，看起来好像多个popstate事件正在触发。看来有一段时间我使用浏览器导航按钮，每次应该触发的popstate事件都会一次发生。
这很难解释。这是我期望在控制台中看到的内容。
加载页面。 Chrome浏览器在页面加载时触发初始的popstate事件
popstate.html：13Sat Nov 19 2011 16:23:48 GMT + 0000（GMT标准时间）
popstate.html：14http：//example/popstate.html
点击新状态链接。地址栏中的位置更新为 example/test/0.06458491436205804 。
2011年11月19日16:23:53 GMT + 0000（GMT标准时间）
popstate.html：14http：//example/test/0.06458491436205804
单击浏览器中的后退按钮。地址栏中的网址返回到/popstate.html
popstate.html：13Sat Nov 19 2011 16:26:27 GMT + 0000（GMT标准时间）
popstate.html：14http：//example/popstate.html
这就是我所期待的。 这就是我实际看到的...
加载页面
popstate.html：13Sat Nov 19 2011 16:27:42 GMT + 0000（格林威治标准时间）
popstate.html：14http：//example/popstate.html
点击新的状态链接。控制台中没有任何内容。地址栏变为/test/0.5458911096211523
在浏览器中点击返回按钮。地址更改回/popstate.html
popstate.html：13Sat Nov 19 2011 16:27:42 GMT + 0000（GMT Standard时间）
popstate.html：14http：//example/popstate.html
popstate.html ：13Sat Nov 19 2011 16:28:57 GMT + 0000（格林威治标准时间）
popstate.html：14http：//example/popstate.html
p>正如您所看到的，它会重复初始popstate并显示返回到/popstate.html，但它永远不会触发推送状态。 如果我现在在浏览器中向前按，我会得到：
popstate.html：13Sat Nov 19 2011 16:27： 42 GMT + 0000（GMT标准时间）
popstate.html：14http：//example/popstate.html
popstate.html：13Sat Nov 19 2011 16:28:57 GMT + 0000（GMT标准时间）
popstate.html：14http：//示例。 com / popstate.html
popstate.html：13Sat 2011年11月19日16:29:58 GMT + 0000（GMT标准时间）
popstate.html：14http：//example/test/0.5458911096211523
（它们全部再次出现，以下是截图： img.ctrlv.in/4ec7da04e20d3.jpg ）
我不知道我是否做错了，我的期望是错误的，或者这实际上是一个错误？
感谢所有阅读所有这些内容的人，并为我提供一些启示。
console.log 中，当你转到其他页面时，不能很好地处理事情。你可以确认这一点，因为它与其他时间戳一起记录了几件事情（这是不可能的）。您最好使用 $（body）。append 来登录（或附加到其他元素）。 其次，当你推送一个状态时，很显然它没有被弹出，所以 popstate 事件是 未触发。如果你想在触发状态的时候触发 onpopstate 处理程序，你可以创建一个如下所示的简单包装： jsfiddle/vsb23/2/ 。 function load（url，state）{//记录函数;通常在这里加载AJAX的东西 $（pre）。append（new Date +\\\+ url +\\\+ JSON.stringify（state）/ /以字符串形式记录对象 +\\\\\\）; function pushState（data，title，url）{ history.pushState（data，title，url）; load（location.href，data）; //推送时调用load函数 $ b window.onpopstate = function（e）{ load（location.href，e.state）; };点击（函数（）{ pushState（{foo：bar}，test，/ test？a = b）; / b $ b $（button / sample push }）;编辑：这已经是一个错误在Chromium bug跟踪器上。
First of all I'm not entirely sure what I'm doing or expecting is right. There doesn't seem to be much documentation about this, but what I've read suggests that this should work.
I encountered some problems while trying to use history.pushState so I ended up making a demo page to see what was going wrong.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="ajax.googleapis/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>When I click the 'new state' link, I'm expecting to see in the console that the onpopstate function has been fired and I'll see a new url (something like test/[number]).
The location in the address bar in chrome does update, but the onpopstate event never fires. Then when I click the back button in the browser, it looks like multiple popstate events are firing. It appears that ever time I use the browser navigation buttons, every popstate event that should have fired is happening all at once.
This is kind of hard to explain. Here's what I expect to see in the console.
Load the page. Chrome fires the initial popstate event on page load
popstate.html:13Sat Nov 19 2011 16:23:48 GMT+0000 (GMT Standard Time)
popstate.html:14example/popstate.html
Click the 'new state' link. The location in the address bar updates to example/test/0.06458491436205804.
Sat Nov 19 2011 16:23:53 GMT+0000 (GMT Standard Time)
popstate.html:14example/test/0.06458491436205804
Click the back button in the browser. The url in the address bar returns to /popstate.html
popstate.html:13Sat Nov 19 2011 16:26:27 GMT+0000 (GMT Standard Time)
popstate.html:14example/popstate.html
That's what I'm expecting. Here's what I'm ACTUALLY seeing...
Load the page
popstate.html:13Sat Nov 19 2011 16:27:42 GMT+0000 (GMT Standard Time)
popstate.html:14example/popstate.html
Click the new state link. Nothing appears in console. Address bar changes to /test/0.5458911096211523
Click back button in browser. Address changes back to /popstate.html
popstate.html:13Sat Nov 19 2011 16:27:42 GMT+0000 (GMT Standard Time)
popstate.html:14example/popstate.html
popstate.html:13Sat Nov 19 2011 16:28:57 GMT+0000 (GMT Standard Time)
popstate.html:14example/popstate.html
As you can see, it repeats the initial popstate and shows the return to /popstate.html, but it never fires for the pushed sate. If I now press forward in the browser, I get:
popstate.html:13Sat Nov 19 2011 16:27:42 GMT+0000 (GMT Standard Time)
popstate.html:14example/popstate.html
popstate.html:13Sat Nov 19 2011 16:28:57 GMT+0000 (GMT Standard Time)
popstate.html:14example/popstate.html
popstate.html:13Sat Nov 19 2011 16:29:58 GMT+0000 (GMT Standard Time)
popstate.html:14example/test/0.5458911096211523
(They all appear again, here's a screenshot: img.ctrlv.in/4ec7da04e20d3.jpg)
I don't know if I'm doing it wrong, my expectations are wrong, or this is actually a bug?
Thanks in advance to anyone who read all of this and can shed some light on it for me.
解决方案Chrome's console.log cannot handle things nicely when you're going to other pages. You can confirm this because it logs several things at once with other timestamps (which cannot be possible). You'd better use $("body").append to log here (or appending to some other element).
Secondly, when you push a state, then obviously it is not popped, so the popstate event is not triggered. If you want to trigger the onpopstate handler when you're pushing a state as well, you can create a simple wrapper like this: jsfiddle/vsb23/2/.
function load(url, state) { // logging function; normally load AJAX stuff here $("pre").append(new Date + "\n" + url + "\n" + JSON.stringify(state) // to log object as string + "\n\n"); } function pushState(data, title, url) { history.pushState(data, title, url); load(location.href, data); // call load function when pushing as well } window.onpopstate = function(e) { load(location.href, e.state); }; $("button").click(function() { pushState({foo: "bar"}, "test", "/test?a=b"); // sample push });Edit: This is already a bug on the Chromium bug tracker.
更多推荐
Chrome onpopstate / pushState错误？
发布评论