JS 页面离开事件 页面关闭事件，实现登录成功返回上个页面

壹 ❀ 引

登录成功后跳转到上一个页面是很常见的需求，比如在天猫添加购物车时网站会效验用户登录情况，若未登录则跳转登录，登录成功返回到先前的商品页。

这个功能实现并不困难，但因为我的奇思妙想让我先后了解了window.history对象以及窗口关闭/离开事件onbeforeunload，那么让这个需求做个引子，让我们开始一次有趣的探索之旅。

贰 ❀ 有趣的onbeforeunload

不管是从什么页面进入的登录页，总是得先有个离开页面的过程，那我在离开前一个页面时先记住页面，登录成功调回来不就好了，所以我第一就想到了onbeforeunload事件。

关于onbeforeunload事件，MDN上说的很详细，此事件在窗口即将被关闭（关闭浏览器 / 跳转到其它页面）时会触发，看个例子：

window.onbeforeunload = function () {
    console.log('页面要离开了。');
};

复制此代码到浏览器控制台并回车执行，之后无论我们跳转或关闭窗口，你会发现console都会执行。

onbeforeunload事件的使用场景其实很多，比如博客园博离开未保存的博客编辑窗口，再如信息较多的表单填写等等，onbeforeunload主要起防止误操作丢失页面的作用，多一次挽回的机会。

值得一提的是onbeforeunload事件中无法使用window.open()以及window.alert()方法，若你使用，浏览器会抛出blocked xxxx during beforeunload类似的错误，意思就是在浏览器关闭前禁止使用弹窗或打开新窗口。

我们前面又说常用于离开页面给出友好弹窗提示，不能用alert怎么实现呢，得换一种方式，这里贴出代码：

window.onbeforeunload = function (e) {
    var e = e || window.event,
        dialogText = '页面还未保存，确定要离开吗？';
    // 兼容IE8和Firefox 4之前的版本
    if (e) {
        e.returnValue = dialogText;
    };
    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    return dialogText;
};

当你运行这段代码并尝试关闭页面时，你会看到页面确实给出了如下提示：

但提示文字并没有使用我们自己定义语句，这是因为浏览器在之后的版本中已统一提示语句，自定义语句只在低版本浏览器适用。

onbeforeunload这么好用，兼容性怎么样呢，通过 can i use 一查，兼容性非常出色，完美兼容 IE6。

那么我有没有使用onbeforeunload来处理登录成功返回上个页面呢？很遗憾并没有，A页面跳B页面，B页面跳C页面，只要页面跳转此事件都会触发，页面跳转本身就属于高频操作，性能代价太大。

叁 ❀ 历史的掌控者history

我突然灵机一动！！！干嘛要自己去记录页面跳转呢，window.history不是已经帮我们做了这件事吗，想想还有点小激动。

打开浏览器控制台，输入window.history并回车，可以看到如下属性：

因为隐私问题，history对象早已不再展示用户浏览记录列表，只保留了go，back，forward以及HTML5新增的pushState与replaceState方法用于操作页面记录。说通俗点，记录我不给你看，但允许你操作。

新增的两个方法我们先不说，这里主要说说前三个。我们来做个小实验，先打开百度，跳转到哔哩哔哩，再跳转到腾讯视频。现在打开控制台，输入window.history.back()并回车，你会发现页面从腾讯视频跳到了哔哩哔哩。按下方向键 ↑ 再回车，页面又回到了最初的百度。

现在输入window.history.forward()并回车，页面又会跳到B站，重复此操作，B站又跳到腾讯视频。

其实不难理解，假设已经建立了A-B-C三个节点，使用back就是从此节点往回退，相反的，forward就是从此节点往前进。

我们在腾讯视频页面输入window.history.go(-2)，你会发现一下回到了百度，因为它等同于执行了2次back方法。对应的，输入window.history.go(2)回车，页面又能从百度回到腾讯，它等同于执行了2次forward方法，是不是很简单。

于是我就想到了这样的逻辑：

function login() {
    //do something...
    //返回上个页面
    window.history.back();
};

于是某位用户将网站的登录页添加到了收藏夹，打开浏览器显示百度首页，点击收藏夹跳转登录页，登录成功后于是网站跳转百度，用户一脸懵逼....

很遗憾，history pass，不符合要求。

肆 ❀ 我的实现

使用onbeforeunload每个页面都会触发，性能不好，使用history我们是不用记录了，结果记录不受网站控制，网站外部也会记。那么我们就综合一下，需要记录的时候我们自己记。

一共也就两个地方需要记忆，我们知道登录一般都在页头，你想进入登录页必须点击登录按钮，那么这个时候记录就好了。

第二种情况就是程序跳转登录页，比如token过期自动跳转提示登录，那么在程序中需要跳转的地方也去记录。

因为登录属于全站性的操作，你也不知道用户在哪个页面进入的登录，所以像我这边使用angularjs开发的项目，就在总module上注册一个登录相关的service，这里只说具体方法实现：

//  在跳转登录前调用，用于记录当前页面
function localStorgeUrl() {
    //取当前页面地址，这里模拟是百度
    // let pathArr = window.location.pathname.split('/');
    // let url = pathArr[pathArr.length - 1];
    let url = 'http://www.baidu.com';
    //本地存储该页面
    window.localStorage.setItem('url', url);
};

function redirectUrl() {
    //获取缓存路径
    let url = window.localStorage.getItem('url');
    //假设用户从外网进入登录页，取不到的情况跳转首页
    url ? location.href = url : location.href = 'index.html';
};

//登录
function login() {
    // 登录相关操作，假设登录成功
    redirectUrl();
};

//跳转登录页前调用
localStorgeUrl();
//开始登录
login();

这里只是贴一个思路，如果有缘人看到有更好的做法，也欢迎讨论。本文从实现功能登录成功返回上个页面为引子，介绍了页面关闭事件onbeforeunload与history，也算一次不错的学习，那么就写到这里。