监听浏览器关闭页面事件

最新推荐文章于 2024-07-24 23:00:08 发布

小杨小杨-喜气洋洋

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量336

点赞数 3

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/m0_63607954/article/details/140520904

版权

最近在工作中遇到挺有意思的需求,特意记录下来，分享给兄弟萌。

大致需求如下：
场景一：在业务页面中需要监听用户是否关闭浏览器窗口，如果中途关闭，则给出二次确认提示。

场景二：在业务页面直接关闭浏览器窗口（此场景与场景一在同一个业务页面中进行）。

简述：在同一页面中，某种情况需要监听浏览器窗口关闭事件，给出二次确认框提示；某种情况不需要监听页面关闭事件，允许直接关闭当前页面。

一提到监听，大家肯定会想到用addEventListener实现，如下：

    //注册监听事件 
    // key:beforeunload --移除监听事件时用到
    window.addEventListener('beforeunload', function (e) {
        e.preventDefault();
        e.returnValue = '是否确定关闭页面？关闭后已经完成的题目不会保存！';
    });

        //移除指定监听事件，key:beforeunload
        //beforeunload 与注册监听事件的key值一致
        window.removeEventListener('beforeunload',function (e) {
                 return null;
          },false);

上述代码的确可以实现监听页面关闭时，弹出浏览器的二次确认弹框事件，但却无法满足上面提到的场景二（上述代码用javascript的注册事件监听成功，但移除事件失败）

解决方案：

既然javascript的方式不行，那我就用jquery的方式。

        //	页面重新加载前 触发，相当于注册一个页面监听事件
        $(window).on('beforeunload', function(event) {
				event.preventDefault(); // 阻止默认行为，即弹出确认对话框
				event.returnValue = '是否确定关闭页面？关闭后已经完成的题目不会保存！'; //             
                 设置返回值
			});

				//注销页面关闭的监听事件
                //beforeunload 与 jq里监听的名称一致
                $(window).off('beforeunload');
                //关闭页面
				window.close();

如果需要直接关闭页面不再弹出二次确认框，则需要注销上面的监听即可。如果需要弹出二次确认框，则直接使用close方法即可，无需注销关闭页面的监听。

demo示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		button:hover{
			cursor: pointer;
			background-color:rgba(63,126,247,0.5)
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"
	  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
	  crossorigin="anonymous"></script>
	  <script>
		$(document).ready(function(){
		  $("#openChild").click(function () {
		  	  window.open("./childWindow.html", "_blank");
		  });
        }); 
	  </script>
	<body>
		<button id="openChild">打开子窗口-业务页面</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"
		integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	<script>
		$(document).ready(function() {
			$(window).on('beforeunload', function(event) {
				event.preventDefault(); // 阻止默认行为，即弹出确认对话框
				event.returnValue = '是否确定关闭页面？关闭后已经完成的题目不会保存！'; // 设置返回值
			});
			console.log($("#close"))
			$("#close").click(function() {
				$(window).off('beforeunload'); //注销页面关闭的监听事件
				window.close();
			});

			$("#close2").click(function() {
				window.close(); //关闭页面
			});
		});
	</script>
	<body>
		<h1>我是子窗口-由父页面打开的。。。。</h1>
		<button id="close">直接关闭</button>
		<button id="close2">二次确认的关闭</button>
	</body>
</html>

demo效果图：

直接关闭页面：

关闭页面时二次确认：

小杨小杨-喜气洋洋

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
监听浏览器关闭页面事件

如果需要直接关闭页面不再弹出二次确认框，则需要注销上面的监听即可。如果需要弹出二次确认框，则直接使用close方法即可，无需注销关闭页面的监听。在同一页面中，某种情况需要监听浏览器窗口关闭事件，给出二次确认框提示；上述代码的确可以实现监听页面关闭时，弹出浏览器的二次确认弹框事件，但却无法满足上面提到的。场景一：在业务页面中需要监听用户是否关闭浏览器窗口，如果中途关闭，则给出二次确认提示。场景二：在业务页面直接关闭浏览器窗口（此场景与场景一在同一个业务页面中进行）。
复制链接

扫一扫