判断能否成功返回上一页

背景

有时我们会遇到这种需求：
当点击返回按钮时，如果有上一页，则返回上一页；如果没有上一页（用户输入URL或书签等），则返回到站点首页。
但基于安全考虑，迄今为止，浏览器并没有提供这样一个 api 来直接判断能否成功返回。这里介绍一个变通的方法。

原理

能够成功返回，可以断定当前页面一定会被卸载；不能返回到上一页，可以断定当前页面一定不会卸载，这样就可以通过监听 beforeunload 事件来判断返回上一页是否成功。

显然，这里说的是多页的情况，单页应用并不适用。

实现

JAVASCRIPT
// 不能成功返回时跳转的兜底URL
const fallbackUrl = 'https://m.lvmama.com';

// 标记值：是否存在上一页
let hasHistory = false;

window.addEventListener('beforeunload', () => {
    // 如果页面成功卸载，说明即将返回上一页，改变标记值
    hasHistory = true;
});

btnBack.addEventListener('click', () => {
    // 尝试返回上一页，如果没有上一页会静默失败，不会抛异常
    window.history.back();

    // hasHistory是异步改变的，所以这里同样要异步判断
    setTimeout(function() {
        // hasHistory为false说明当前页面没有卸载，也就没有能成功返回，那就跳转到fallbackUrl
        if (!hasHistory) {
            window.location.href = fallbackUrl;
        }
    }, 200);
});