gpt4 book ai didi

javascript - Chrome onpopstate/pushState 错误?

转载 作者:太空狗 更新时间:2023-10-29 14:18:23 27 4
gpt4 key购买 nike

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

我在尝试使用 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 事件都会同时发生。

这有点难以解释。这是我希望在控制台中看到的内容。

Load the page. Chrome fires the initial popstate event on page load

popstate.html:132011 年 11 月 19 日星期六 16:23:48 GMT+0000(GMT 标准时间)

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

Click the 'new state' link. The location in the address bar updates to http://example.com/test/0.06458491436205804.

2011 年 11 月 19 日星期六 16:23:53 GMT+0000(GMT 标准时间)

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

Click the back button in the browser. The url in the address bar returns to /popstate.html

popstate.html:132011 年 11 月 19 日星期六 16:26:27 GMT+0000(GMT 标准时间)

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

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

Load the page

popstate.html:132011 年 11 月 19 日星期六 16:27:42 GMT+0000(GMT 标准时间)

popstate.html:14http://example.com/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: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,但它从不触发推送状态。如果我现在在浏览器中向前按,我会得到:

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

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

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

(他们又出现了,截图如下:http://img.ctrlv.in/4ec7da04e20d3.jpg)

不知道是我做错了,是我的期望错了,还是这其实是个bug?

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

最佳答案

当您转到其他页面时,Chrome 的 console.log 无法很好地处理事情。您可以确认这一点,因为它使用其他时间戳(这是不可能的)同时记录几件事。您最好使用 $("body").append 在这里登录(或附加到其他元素)。

其次,当你push一个状态时,显然它没有弹出,所以popstate事件不会被触发。如果你想在推送状态时也触发 onpopstate 处理程序,你可以像这样创建一个简单的包装器: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
});

编辑:这已经是a bug on the Chromium bug tracker .

关于javascript - Chrome onpopstate/pushState 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8195502/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com