[极致用户体验] 多页面应用里，「网页内返回」按钮，何时用 history.back 何时用 replaceState？

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

上篇文章《网页里的「返回」应该用 history.back 还是 push ？》论证了单页面应用（Single-Page Application，简称SPA）如何实现网页内的「返回」按钮，本篇文章将会论证多页面应用（Multi-Page Application，简称MPA）如何实现网页内的「返回」按钮。

何谓「极致用户体验」

上文我提到，网站应该是有页面层级的：

它是一个树状结构，每个页面、模块划分非常清晰。

如果要追求极致用户体验，用户在浏览器点击「前进」或「返回」时，应该遵循这样的规则：

• 点浏览器的「前进」按钮(forward，右箭头)，只允许相邻页面层级，从左往右跳转。
• 点浏览器的「返回」按钮(back，左箭头)，只允许相邻页面层级，从右往左返回。

实现方案

要实现这样的规则，开发者必须控制好浏览器的历史记录栈：

• 用户进入更深的页面层级，浏览器的历史记录栈就增1。
• 用户返回更浅的页面层级，浏览器的历史记录栈就减1。但历史记录栈无法减1时，可以让历史记录栈数量保持不变。

我解释一下，开发者怎么控制历史记录栈？

什么时候历史记录栈增一？ 当我们调用history.pushState()时，浏览器历史记录栈就会新增一个历史记录，主要存了URL等信息。此时，用户点击「浏览器返回」和「浏览器前进」，就可以在「上一个页面」和「当前页面」反复横跳。

什么时候历史记录栈减一？ 当我们调用history.back()时，就可以让浏览器历史记录栈减一。其实严格来说不算减一，只是页面回退到了上一条记录，这相当于用户点了「浏览器返回」按钮。

有时候点「网页返回」按钮，不能直接调用history.back，为什么？ 如果调用history.back()会返回其它界面（或者用户是直接打开了我们的某个页面，没有上一条历史记录了，「浏览器返回」按钮也是灰色），即调用history.back()无法返回我们自己网站的上一页面层级，就应该调用history.replaceState()，跳到上一页面层级。注意不能用history.push，如果用了push会打破我们的原则，那时候再点「浏览器返回」就从左往右导航了，违背了我们的网站页面层级。

回顾单页面应用方案

只要父页面跳转到子页面时，携带个「标识」，告知子页面，跳转来源是你亲爸爸。子页面就知道了，自页面的「网页返回」按钮，可以直接触发history.back()返回。

如果子页面发现没有「标识」，说明不是亲爸爸跳转到该子页面的，通过history.back()无法返回亲爸爸页面。不得不通过history.replaceState()前往亲爸爸页面，并且去的时候，不能带「标识」，因为子页面不是父页面的亲爸爸。

跳转时的「标识」，可以用history.pushState()中的state来实现。绝不能用URL中的参数来实现。因为URL太容易伪造了，可能用户点个收藏、复制个网址，就把标识给带上了。但是state绝对足够隐蔽。

多页面应用方案

问题描述

我的父页面 game.hullqin.cn 和 子页面 game.hullqin.cn/wzq 是部署了两套前端代码，他们是MPA。

在子页面有个「游戏列表」按钮，相当于我的「网页返回」按钮。我期望这两个页面符合网站页面层级标准：

• 如果可以通过hittory.back()返回首页就用它。
• 如果hittory.back()无法返回首页，就用history.replaceState()。

难点1

直接调用history.pushState()，可以传递state标识，但这只会修改URL，并不会触发浏览器刷新，网页依然停留在父页面。

直接调用window.location.href = 'game.hullqin.cn/wzq'会使浏览器刷新，但是不能传递state标识。可能还需要借助sessionStorage方案来保存、传递「标识」，但这又引入了更高的复杂度，因为它是跟历史记录栈无关的，我们不得不在sessionStorage中存一些路由信息，才能正确传递「标识」。

解决难点1

先调用history.pushState()，传递state标识，再调用window.location.reload()触发刷新。这会保持state给下一个页面。

难点2

如果我们是通过调用history.pushState()来增加浏览器历史记录栈的，那么我们调用history.back()时，页面不会刷新，只改变URL。

也许你就说：像刚才一样，调用history.back()后再调用window.location.reload()触发刷新，不就解决了吗？

但这里还有一点：用户点击「浏览器返回」按钮时，只会改URL，页面不会刷新。虽然网址已经是首页了，但是界面依然是在game.hullqin.cn/wzq这个子页面。

类似的，用户在父页面点「浏览器前进」按钮准备进入game.hullqin.cn/wzq这个子页面时，也会只改URL，页面不刷新。

解决难点2

监听window.onpopstate事件，这个事件会在用户点「浏览器返回」按钮或「浏览器前进」按钮时触发。我们监听该事件，判断当前页面URL是否符合当前页面的路由规则。如果有差异，就调用window.location.reload()触发刷新。

代码

父页面核心代码

你可以参考 game.hullqin.cn 的网页源码，这是一个非常简洁的门户页面。

<div style="flex-grow:1;display:flex;flex-direction:column;justify-content:center">
  <a class=