>我有我网站的查询字符串 URL,如下所示:
?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
当用户转到下一页(从第 1 页到第 2 页)时:
我们明确递增
pn
(页码乘以 1)并将其设置在查询字符串 URL 中。更改的查询字符串:
?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=2
我还存储了旧的查询字符串,它看起来像:
?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
然后,我将两者推送到窗口历史记录以更改 URL 并保存上一个以供浏览器返回:
window.history.pushState(oldQS, null, newQS);
完成此操作后,当我在第 2 页上时,我检查
window.history.state
.它存储我以前的状态:?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
我从第 2 页按浏览器返回以返回第 1 页。我放了一个断点:
$(window).on('popstate', function(e) { console.log(e.originalEvent.state) });
e.originalEvent.state
null
.
观察:
window.history.state
不是null
的,当我在第 2 页时存储正确的值。- 当我单击浏览器返回时,它会获得
null
值。
到目前为止我做了什么:
(不起作用。
将断点放在
hashchange
事件上,但没有帮助,因为 URL 中没有 #。在我的 Javascript 代码的每个
window.history
函数上都放置断点,例如pushState()
,replaceState()
但当我按浏览器返回时,它们都没有被击中。
我不知道要查看哪些其他地方/功能可能会window.history.state
更改为null
.
单击浏览器返回来确定它如何以及在哪里变为空?
你问:
我不知道要查看哪些其他地方/函数可能会将 window.history.state 更改为空。
如何通过单击浏览器返回来确定它如何以及在哪里变为空?
让我们阅读W3C HTML5规范:
5.5.2 历史界面
。
历史记录接口的状态属性必须返回用户代理设置的最后一个值。最初,其值必须为 null。
结论:加载文档时,history.state
最初是null
。
5.6.10 历史遍历
当用户代理需要将历史记录遍历到指定的条目 [...] 时,用户代理必须执行以下操作。
。
- 如果条目是状态对象条目,则让 state 成为该状态对象的结构化克隆。否则,让状态为空。
。
- 如果指定条目的文档具有最新条目,并且该条目不是指定的条目,则让状态更改为 true;否则,请将其为 false。
。
- 如果状态更改为 true,则使用 PopStateEvent 接口在文档的窗口对象上触发名为 popstate 的受信任事件,并将状态属性初始化为 state 的值。[...]
结论:当导航回加载文档时的状态时,popstate
事件触发的状态是 null
。