判断能否成功返回上一页

背景

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

本文链接:

版权声明:本博客所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 iBlog

阅读 720 | 发布于 2019-06-23
暂无评论