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

捕获窗口关闭、刷新事件

作者: 过桥 | 来源:发表于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)

    相关文章

      网友评论

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

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