监听浏览器关闭事件，并且兼容ie,ff,chrome

最新推荐文章于 2024-08-22 11:21:06 发布

qq171264

最新推荐文章于 2024-08-22 11:21:06 发布

阅读量8.1k

点赞数

分类专栏： HTML javascript 文章标签： javascript 浏览器关闭

本文链接：https://blog.csdn.net/qq171264/article/details/80190176

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

刚刚换了工作小组，小组哥们说有个烦人的功能，就是执行过程必须在浏览器这边进行，但是用户可能在执行过程中按F5或者关闭了浏览器，导致执行失败！说到这个，我想起了在csdn的时候关闭浏览器有弹出询问框的功能，于是百度和google监听浏览器关闭监听的方法，废话不多说，直接上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>阻止关闭和刷新</title>
</head>
<body>
<script type="text/javascript">   
window.addEventListener("beforeunload", listenClose, false);

function unListen() {
	window.removeEventListener('beforeunload',listenClose, false);
}

function listenClose(e) {

  var confirmationMessage = '业务未执行完成，离开本页面会导致执行失败，是否现在离开？';

  (e || window.event).returnValue = confirmationMessage;     

  return confirmationMessage;                                

}
       
</script> 

<button id="" οnclick="unListen()">解除关闭监听</button>
</body>
</html>

原理很简单，就是初始化页面的时候增加一个关闭和刷新的监听弹窗，关闭或者刷新时浏览器会执行 beforeunload 事件，具体原理百度很多，也可以参考这里，这里做下记录，以便以后使用。