有什么可能使window.history.state在浏览器上返回null的情况？ [英] What are possible cases making window.history.state null on browser back?

问题描述

我的网站的查询字符串网址如下：

I have my website's query string URL like:

?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1

当用户去到下一页（从第1页到第2页）：

When user go to next page (From page 1 to page 2):

1. 我们明确增量 pn （页码加1）并在查询字符串URL中设置。

1. We explicity increment pn (page number by 1) and set it in query string URL.

更改查询字符串：

?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=2

我还存储旧的查询字符串，它看起来像：

I also store the old query string, it looks like:

?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1

然后我将两个推送到窗口历史记录以更改URL并保存以前的浏览器：

I then push both to window history to change URL and save previous for browser back:

window.history.pushState(oldQS, null, newQS);

执行此操作后，当我在第2页时，我检查 window.history.state 。它存储了我以前的状态：

After doing this, when I am on page2, I check window.history.state. It stores my previous state:

?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1

我从第2页按回浏览器回到第1页。我把断点放在：

I press browser back from page2 to get back to page1. I put a breakpoint on:

$(window).on('popstate', function(e) {
    console.log(e.originalEvent.state)
});

e.originalEvent.state is null 。

观察：

• window.history.state 不是 null 和当我在第2页时存储正确的值。


• 当我点击浏览器时，它获得 null 值。



Observations:

• The window.history.state is not null and stores correct value when I am on page2.
• It gets null value when I click browser back.

（已没有工作。）




• 将断点放在 hashchange 事件，但没有帮助，因为URL中没有＃。

• put breakpoint on hashchange event but didn't help as there's no # in the URL.

在每个 window.history 我的Javascript代码上的函数，如 pushState（）， replaceState（）但当我没有被它击中时按回浏览器。

put breakpoint on every window.history function on my Javascript code like pushState(), replaceState() but none of it is getting hit when I press browser back.

我不知道所有其他地方/功能看哪些可能正在改变 window.history.state 到 null 。

I don't know what all other places/function to look at which might be changing window.history.state to null.

怎么能我通过点击浏览器来确定它是如何以及在哪里变成空的？

How can I figure out how and where did it become null by clicking browser back?

推荐答案

你问：




我不知道所有其他地方/函数可以将window.history.state更改为null。

I don't know what all other places/function to look at which might be changing window.history.state to null.

我怎样才能弄清楚beco的方式和位置单击浏览器返回null？

How can I figure out how and where did it become null by clicking browser back?

让我们阅读W3C HTML5规范：

Let's read the W3C HTML5 specification:

5.5.2历史界面

...

历史界面的state属性必须返回最后一个值它是由用户代理设置的。最初，它的值必须为null。

The state attribute of the History interface must return the last value it was set to by the user agent. Initially, its value must be null.

结论：加载文档时， history.state 最初是 null 。

Conclusion: when the document loaded, the history.state is initially null.




5.6.10历史遍历

当需要用户代理将历史记录遍历到指定条目[...]时，用户代理必须按如下方式操作。

When a user agent is required to traverse the history to a specified entry, [...], the user agent must act as follows.

...



1. 如果条目是状态对象条目，则让state成为该状态对象的结构化克隆。否则，让状态为null。



...



1. 如果指定条目的文档具有最新条目，并且该条目不是指定条目，则将状态更改为true;否则就是假的。



...





1. 如果状态更改为true，则使用PopStateEvent接口使用state属性在Document的Window对象上触发名为popstate的受信任事件初始化为州的价值。 [...]









结论：当导航回文档加载时的状态时，使用 popstate 事件触发的状态为 null 。

Conclusion: when navigating back to the state when the document was loaded, the state triggered with the popstate event is null.

这篇关于有什么可能使window.history.state在浏览器上返回null的情况？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！