背景
有时我们会遇到这种需求:
当点击返回按钮时,如果有上一页,则返回上一页;如果没有上一页(用户输入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);
});