pushstate和popstate的实现原理

基本介绍

• pushstate：前端用来向​history​中塞入一条历史记录，且必须是当前域名下的，执行完成后，地址栏会变成塞入的url但页面不会改变。

• popstate：与​pushstate​组合实现监听用户点击返回键时触发的事件，单独使用并不能实现监听用户退出的功能。

详细可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event

为什么前端通过​pushstate​和​popstate​的组合来监听用户返回事件？

内核与前端的调用触发逻辑图

上面是一个典型通过pushstate来实现无法回退的做法。

1. 在A页面调用​pushstate​，此时会触发内核的​RenderDidNavigateToxxxPage​，同时会调用​InsertOrReplaceEntry​向历史记录里塞入B的Url，但是并不会加载B页面
2. 用户点击返回，触发内核的​goback​，此时会获取当前的上一条历史记录，这里就是获取A的历史记录，准备加载A页面
3. 经过层层调用后，发现当前页面和要加载的页面相同，因此触发​LoadInSameDocument​，在该函数里且仅能在该函数里触发​statePopped​，也就是上层要监听的​onpopstate​
4. 此时虽然用户点击了返回，但是实际上还是在当前的页面A，此时又一次调用​pushstate​，又回到了步骤一

因为想要触发到popstate必须要触发loadInSameDocument，pushstate只是其中的一种方式，暂不确定还有没有其他的做法可以和pushstate一样。