美文网首页
捕获窗口关闭、刷新事件

捕获窗口关闭、刷新事件

作者: 过桥 | 来源:发表于2016-03-29 13:19 被阅读6003次

参考

js实现关闭浏览器时提示用户是否保存信息
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

页面加载流程

页面加载时只执行onload 
页面关闭时先执行onbeforeunload,最后onunload 
页面刷新时先执行onbeforeunload,然后onunload,最后onload。

使用方式

window.onbeforeunload = function(event){    
    return '您可能有数据没有保存'; 
};

如果引入jquery以上方法无效,需使用jquery绑定

$(window).bind('beforeunload', function(){ 
    return '您可能有数据没有保存'; 
});

扩展

为避免其他事件也触发(例如a跳转等)

var is_confirm = true;
(function () {
    // 关闭窗口时弹出确认提示
    $(window).bind('beforeunload', function () {
        // 只有在标识变量is_confirm不为false时,才弹出确认提示
        if (window.is_confirm !== false) {
            return "您可能有数据没有保存";
        }
    });
    // mouseleave mouseover事件也可以注册在body、外层容器等元素上
    $(window).bind('mouseover mouseleave', function (event) {
        is_confirm = event.type == 'mouseleave';
    });
})();

说明

原构想仅关闭页面时,清空session,实际测试后发现常见区分刷新与关闭均通过鼠标点击位置,无法满足常用使用场景。
现于主页预留注销/退出(清空session)按钮,单独处理,刷新或关闭浏览器仅提示保存数据(不清空session)

相关文章

  • 捕获窗口关闭、刷新事件

    参考 js实现关闭浏览器时提示用户是否保存信息用js判断页面刷新或关闭的方法(onbeforeunload与onu...

  • JS刷新页面及页面跳转

    返回上一页 刷新页面 自动刷新页面 关闭窗口或者打开窗口时刷新页面

  • 关闭窗口时刷新或想开窗时刷新

    关闭窗口时刷新或想开窗时刷新,在 中调用以下语句即可 重新加载页面

  • Duilib使用Close()关闭窗口

    窗口被关闭流程:按钮发送WM_CLOSE消息给窗口,窗口处理(窗口关闭前消息事件)但不截断信息,继续传递给::De...

  • js中的事件

    事件 事件流冒泡捕获阻止冒泡 阻止默认事件 常用事件 键盘 窗口 鼠标 拖放松开 表单 事件参数target 目标...

  • window

    业务场景: 当前窗口打开子窗口,当子窗口关闭时候,父窗口刷新页面 窗口之间的通信方式 1. 父窗口启动计时器轮训子...

  • web浏览器常用事件

    浏览器窗口事件 load 页面加载完成时触发 beforeunload 窗口关闭之前触发 ...

  • iframe和html交互

    iframe传递事件给html html传递事件给iframe 刷新浏览器窗口方式

  • 11 Pygame进阶

    Pygame事件 设置窗口标题 QUIT:关闭按钮被点击事件MOUSEBUTTONDOWN:鼠标按下事件MOUSE...

  • electron 关闭窗口close和closed

    Event: 'closed' 当窗口已经关闭的时候触发.当你接收到这个事件的时候,你应当删除对已经关闭的窗口的引...

网友评论

      本文标题:捕获窗口关闭、刷新事件

      本文链接:https://www.haomeiwen.com/subject/lnlslttx.html