如何用js监听浏览器页面的关闭/刷新事件

最新推荐文章于 2025-03-23 14:49:19 发布

skybiut

最新推荐文章于 2025-03-23 14:49:19 发布

阅读量3.1w

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/skybiut/article/details/81128179

版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript来区分浏览器页面关闭与刷新的方法。针对不同浏览器（如Chrome、Firefox等）的行为差异，通过设置`onbeforeunload`和`onunload`事件监听器并结合标志位来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何用js监听浏览器页面的关闭/刷新事件

因为要做关闭页面退出功能，但页面跳转和刷新时并不做退出事件，需要甄别刷新和关闭，也查找了很多方法，踩了许多深坑，在这里记录一下自己的方法吧。

不同的浏览器刷新和关闭时对onbeforeunload()和onunload()的执行步骤是不同的，没弄明白之前导致多种尝试都不见效，一丝丝头疼。
ie、chrome、360：
页面加载时执行unload()；
刷新时先执行onbeforeload()，新页面即将替换旧页面时onunload()，最后unload();
关闭时执行onbeforeload()，再执行onunload().
firefox:
刷新时只执行onunload();
关闭时只执行onbeforeunload().

首先判断浏览器的类型，简便可用navigator.userAgent()获取浏览器的字符串，与浏览器类型做查找即可。
目前对Chrome和firfox区分关闭和刷新成功。
浏览器为firfox时flag为false，Chrome为true。

window.onload(){
window.onunload = function() {
                if(flag){
                    console.log('关闭操作');
                }
                else {
                    console.log('刷新操作');
                }
            };

            window.onbeforeunload = function () {
                if(!flag){
                    console.log('关闭操作');
                }
                else{
                    console.log('刷新操作');
                }
            };
       }