如何在JavaScript中检测浏览器或标签的关闭

999 阅读1分钟

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>

输出

Detect browser or tab closing in JavaScript