当前位置：首页 > news >正文

关闭浏览器弹出框onbeforeunload，onunload和onunloadcancel

news 2025/6/7 3:06:17

前言

最近需要做一个阻挡用户关闭页面的功能，大概流程是当用户关闭页面，弹出“确定关闭提示”，点击“离开此页“关闭页面，点击“留在此页”关闭提示框。而当用户下次再关闭的时候不在给予提示。减少用户厌恶感。为了实现功能需要用到了onbeforeunload,onunload和onunloadcancel。

简单说明图：

var text = "真的离开?"
window.onbeforeunload = function(){  return text;  
}  
window.onunload= function(){  return text;  
}  
window.onunloadcancel= function(){  console.log("留下来")
}

onbeforeunload介绍

当窗口即将被关闭时,会触发该事件.此时页面正常能看见,且该事件的默认动作可以被取消。

window.onbeforeunload = function (e) {e = e || window.event;// 兼容IE8和Firefox 4之前的版本if (e) {e.returnValue = '关闭提示';}// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+return '关闭提示';
};

ps：
1.刷新页面算是离开页面，也会触发这效果，不过展示框不一样。
2.chrome和firefox的新版本中“text”内容是不会显示的。但还是要填入，不填入firefox是不会显示关闭提示框。
3.HTML5规范声明:在该事件的处理函数中调用下列弹窗相关的方法时,可以忽略不执行,window.showModalDialog(), window.alert(), window.confirm() window.prompt().

onunload介绍

当页面关闭后,会触发unload事件.

window.onunload = function（）{}

ps:
如果您重载页面，也会触发 unload 事件（以及 onload 事件）。

onunloadcancel介绍

当用户弹出页面关闭框，点击“留下此页”后触发的。

window.onunloadcancel= function（）{}

最终实现

因为要兼容各浏览器版本，且需要支持在关闭浏览器的时候不会触发。所以修改了一下代码。如下：

function confirmClose(){let _t = null;let isShow  = truelet _text = "只在IE上会显示提示";window.onbeforeunload = function(event) {_do(event);}window.onunload = function(event) {_do(event);}window.onunloadcancel = function() {clearTimeout(_t);}function _do(event){event = event || window.event;setTimeout(function() {_t = setTimeout(onunloadcancel, 0)}, 0);var browser = navigator.appName;if(event && isShow) {isShow = false;event.returnValue = _text;}if(isShow) {if(browser == "Netscape") {return _text;} else {window.event.returnValue = _text;}}}
}confirmClose()//放置需要引用的地方