我是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="game" href="/uno"><img alt="" class="logo" src="https://fe-1255520126.file.myqcloud.com/uno/logo.svg"/><span>UNO</span></a>  <a class="game" href="/ddz"><img alt="" class="logo" src="https://fe-1255520126.file.myqcloud.com/ddz/logo.svg"/><span>斗地主</span></a>  <a class="game" href="/wzq"><img alt="" class="logo" src="https://fe-1255520126.file.myqcloud.com/wzq/logo.svg"/><span>五子棋</span></a></div><script>Array.from(document.getElementsByClassName('game')).forEach(game => {  game.addEventListener('click', (event) => {    if (event.button !== 0) return;    if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;    event.preventDefault();    window.history.pushState({key: Math.random().toString(36).substring(2, 10), usr: {keepSession: true}}, '', game.getAttribute('href'));    window.location.reload();  });});window.addEventListener('popstate', () => {  if (window.location.pathname !== '/') window.location.reload();});</script>

留神点：调用history.pushState()时，传递的state标识是：

{  key: Math.random().toString(36).substring(2, 10),  usr: { keepSession: true },}

这是为了合乎子页面 React-Router state的标准，须要蕴含一个随机字符串key，标记一次会话，用usr存储开发者自定义数据。

正如我上篇文章提到的，我为了标识子页面来自亲爸爸，是用了keepSession这个名字。

子页面外围代码

子页面我应用了React框架和React-Router。「网页返回」按钮外围逻辑如下：

import { Link, useLocation, useNavigate } from 'react-router-dom';function BackLink(props: BackLinkProps) {  const {    to, children, className,  } = props;  const navigate = useNavigate();  const { state } = useLocation();  const keepSession = state.keepSession;  const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {    if (event.button !== 0) return;    if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;    event.preventDefault();    if (keepSession) {      navigate(-1);    } else if (window.history.length === 1) {      navigate(to, { replace: true });    } else {      navigate(to, { replace: true });      // 通过上面形式刷新浏览器"后退"记录，免得通过"后退"进入不符预期的页面      navigate(to);      navigate(-1);    }  };  return (    <Link to={to} className={className} onClick={handleClick}>      {children}    </Link>  );}// 另外还有以下逻辑，能够写在另一个JS文件或间接写在html中：window.addEventListener('popstate', () => {  if (!window.location.pathname.startsWith("/wzq")) window.location.reload();});

兴许你会好奇if (event.button !== 0) return;和if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;这两行代码，欢送阅读文章：《你的 Link Button 能让用户抉择新页面关上吗？》。

写在最初

我是HullQin，公众号线下团聚游戏的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者HullQin受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。