参考
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)