js监听浏览器tab页切换的实例

在 JavaScript 中，我们可以通过监听 `visibilitychange` 事件来判断浏览器的 Tab 页是否被切换。以下是一个示例代码：

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    console.log("Tab 页被切换到后台");
  } else {
    console.log("Tab 页被切换到前台");
  }
});

在上述代码中，我们使用 `addEventListener` 方法来监听 `visibilitychange` 事件。当事件触发时，我们可以通过 `document.hidden` 属性来判断当前浏览器 Tab 页是否被隐藏。

如果 `document.hidden` 为 `true`，则表示浏览器 Tab 页被切换到了后台；如果 `document.hidden` 为 `false`，则表示浏览器 Tab 页被切换到了前台。

使用上述代码，我们可以实现对浏览器 Tab 页切换事件的监听。

相关问题

js监听浏览器页面关闭事件

可以使用 `beforeunload` 事件来监听浏览器页面关闭事件。该事件会在页面即将关闭之前触发，可以在该事件中执行一些清理工作或者提示用户是否要离开当前页面。示例代码如下：

window.addEventListener('beforeunload', function (event) {
  // 执行清理工作或提示用户是否要离开当前页面
  event.preventDefault();
  event.returnValue = '';
});

需要注意的是，由于浏览器的安全策略，一些浏览器可能不会允许在 `beforeunload` 事件中修改 `event.returnValue` 的值，因此可能无法通过该方式阻止页面关闭。

js监听浏览器当前标签页关闭

可以使用 `beforeunload` 事件来监听浏览器当前标签页关闭操作。当用户关闭当前标签页或者刷新页面时，该事件会被触发。你可以在该事件的回调函数中执行一些操作，比如向服务器发送请求，保存用户数据等。

下面是一个示例代码：

window.addEventListener('beforeunload', function(e) {
  // 在这里执行你的操作
  // 发送请求，保存数据等
  // e.returnValue = '你的提示信息';  // 可以设置一个提示信息
});

需要注意的是，为了防止误操作，浏览器通常会在用户关闭标签页时弹出提示框，询问用户是否确认离开当前页面。如果你希望在用户关闭当前标签页时不弹出提示框，可以在事件的回调函数中设置 `e.returnValue` 属性的值，如上面代码中的注释所示。