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

7,706 阅读6分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第7天,点击查看活动详情

背景

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

何谓「极致用户体验」

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

image.png

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

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

  • 点浏览器的「前进」按钮(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()

0807 游戏列表.png

难点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。喜欢可以关注我噢~我有空了会分享做游戏的相关技术,会在这2个专栏里分享:《教你做小游戏》《极致用户体验》