beforeunload 事件可以用来检测浏览器标签或窗口的关闭。这可以用来通知用户,如果页面上的某些数据没有被保存,或者用户通过关闭标签或浏览器意外地离开了当前页面。
这种情况可以通过beforeunload事件实现。
BeforeUnloadEvent是从Event降生的。这个事件允许网页显示一个确认对话,在对话中询问用户是否真的要离开这个页面。如果用户确认,浏览器就会导航到新的页面;否则,导航就会被取消。
语法
在addEventListener()等方法中使用事件名称,或者设置一个事件处理程序属性。
addEventListener('beforeunload', (event) => { });
onbeforeunload = (event) => { };
JavaScript代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Detect browser or tab closing in JavaScript</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h2>Beforeunload</h2>
<a href="https://google.com">Spark Radius</a>
<p id="btn"></p>
</div>
<script type="text/javascript">
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = 'Okay Bye';
});
</script>
</body>
</html>
输出
