原生JS实现跳转或刷新页面时,浏览器提示当前页面未保存

5,739 阅读4分钟

这是我参与更文挑战的第16天,活动详情查看: 更文挑战

前言

今天来谈谈JS如何控制浏览器的提示内容,相信很多小伙伴都见过这样的场景,编辑的文章未保存时点击退出或者刷新,浏览器会跳出提示“当前页面未保存”。那么这个效果是如何实现的呢?其实并不复杂,它主要只涉及到了浏览器的一个API。

思路

根据JS事件,触发浏览器的提示 ==> 自定义显示提示内容。

JS事件

window.onbeforeunload

window.onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。

window.onbeforeunload 事件的作用其实挺广泛的,尤其作用于数据的埋点,比如GA页面访问统计,监听页面窗口是否被中断,用户访问时常等。之前我写过一篇文章《看完就懂系列》谈谈数据埋点的原理与实现 对数据的埋点原理做了一定的说明,其中用户停留时长(Time On Site)的业务埋点就可以使用 window.onbeforeunload 事件来实现。

同样的,我们可以利用该事件弹出一个对话框,提示用户是继续浏览页面还是离开当前页面。

值得一提的是,对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?",并且该信息不能删除。但是我们也可以使用 returnValue 来自定义一些消息提示与标准信息一起显示在对话框。另外,有的浏览器不支持自定义消息提示,只能显示标准信息,比如Firefox浏览器。

代码实现

思路有了,JS事件也有了,下面就是代码的实现了。

    window.onbeforeunload = function (e) {
        e = e || window.event
        if (e) {
            e.returnValue = '网站可能不会保存您的修改哦~'
        }
        return '网站可能不会保存您的修改哦~'
    }
    
    //手动调用: window.confirm('系统可能不会保存你所做的修改')

地址跳转效果图:

image.png

刷新页面效果图 image.png

关闭页面效果图 image.png

关闭浏览器效果图 image.png

可以看出,自定义的消息提示并没有生效,原因就是因为部分浏览器基于安全原因没有开放 returnValue 自定义消息提示,避免网站给用户的提示被误以为是浏览器的提示。

后记

今天是我坚持日更的第十六天,在这十六天里,也许写的博客比较简单基础,但是每一篇文章都是当天一字一句敲出来的,题材也是当天想的,没有存稿,也没有文思泉涌,更多的是逼着自己做这件事情罢了。如果没有每天花几小时做日更,那么每天的这几个小时自己会做什么呢?也许刷刷手机看看新闻就过去了。 加油吧,选择死磕自己,也许路上会有不同的风景。

PS: 今天是我参加掘金更文挑战的第16天,半个月多啦!有志者,事竟成。大家一起加油呀~

附更文挑战的文章目录如下: