popstate

popstate

关注
发信
关注(28)粉丝(399)

Chrome onpopstate / pushState错误？

本文介绍了Chrome onpopstate / pushState错误？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先，我不完全确定我在做什么或期望是正确的。似乎没有太多关于此的文档，但是我读过的内容表明这应该可行。



在尝试使用history.pushState时遇到一些问题所以我最终制作了一个演示页面，以查看发生了什么问题。

 <！DOCTYPE html> 
< html> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8> 
< title>无标题文档< / title> 
 
< script type =text / javascriptsrc =https://ajax.googleapis.com/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事件都会一次发生。



这很难解释。这是我期望在控制台中看到的内容。

popstate.html：13Sat Nov 19 2011 16:23:48 GMT + 0000（GMT标准时间）

popstate.html：14http：//example.com/popstate.html

2011年11月19日16:23:53 GMT + 0000（GMT标准时间）

popstate.html：14http：//example.com/test/0.06458491436205804

popstate.html：13Sat Nov 19 2011 16:26:27 GMT + 0000（GMT标准时间）

popstate.html：14http：//example.com/popstate.html

这就是我所期待的。
这就是我实际看到的...

popstate.html：13Sat Nov 19 2011 16:27:42 GMT + 0000（格林威治标准时间）

popstate.html：14http：//example.com/popstate.html

popstate.html：13Sat Nov 19 2011 16:27:42 GMT + 0000（GMT Standard时间）

popstate.html：14http：//example.com/popstate.html

popstate.html ：13Sat Nov 19 2011 16:28:57 GMT + 0000（格林威治标准时间）

popstate.html：14http：//example.com/popstate.html

p>

正如您所看到的，它会重复初始popstate并显示返回到/popstate.html，但它永远不会触发推送状态。
如果我现在在浏览器中向前按，我会得到：

（它们全部再次出现，以下是截图：）



我不知道我是否做错了，我的期望是错误的，或者这实际上是一个错误？



感谢所有阅读所有这些内容的人，并为我提供一些启示。

console.log 中，当你转到其他页面时，不能很好地处理事情。你可以确认这一点，因为它与其他时间戳一起记录了几件事情（这是不可能的）。您最好使用 $（body）。append 来登录（或附加到其他元素）。



其次，当你推送一个状态时，很显然它没有被弹出，所以 popstate 事件是 未触发。如果你想在触发状态的时候触发 onpopstate 处理程序，你可以创建一个如下所示的简单包装：。 

  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 
}）;

编辑：这已经是上。


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="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>

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.

popstate.html:13Sat Nov 19 2011 16:23:48 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/popstate.html

Sat Nov 19 2011 16:23:53 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/test/0.06458491436205804

popstate.html:13Sat Nov 19 2011 16:26:27 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/popstate.html

That's what I'm expecting.Here's what I'm ACTUALLY seeing...

popstate.html:13Sat Nov 19 2011 16:27:42 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/popstate.html

popstate.html:13Sat Nov 19 2011 16:27:42 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/popstate.html

popstate.html:13Sat Nov 19 2011 16:28:57 GMT+0000 (GMT Standard Time)

popstate.html:14http://example.com/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:

(They all appear again, here's a screenshot: http://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: http://jsfiddle.net/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错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-18 16:13
Powered by LMLPHP ©2024 popstate 0.002123