监听切换事件（visibilitychang事件）

最新推荐文章于 2024-04-13 15:50:45 发布

想做一条躺平的咸鱼

最新推荐文章于 2024-04-13 15:50:45 发布

阅读量1.4k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49084104/article/details/123623521

版权

为什么可以监听浏览器窗口的切换呢？那自然是因为浏览器自带了相关的API了，那就是利用visibilitychange属性，MDN的介绍：当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。所以我只需要注册监听对visibilitychange的事件即可：

document.addEventListener("visibilitychange", function() {
  if(document.visibilityState == 'hidden'){
      //todo...
  } else if (document.visibilityState == 'visible') {
      //todo...
  }
});

这里需要注意的是，MDN的上有说明的是，不要使用window而是

document：出于兼容性原因，请确保使用 document.addEventListener而不是window.addEventListener来注册回调。 Safari &lt;14.0仅支持前者。

准备两个Html
1.第一个

&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;tab1&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;我是页面1&lt;/h1&gt;
    &lt;script&gt;
        document.addEventListener("visibilitychange", function() {
            console.log(document.visibilityState);
            if(document.visibilityState == 'hidden'){
                document.title = '别看tab2了，看我';
            } else if(document.visibilityState == 'visible') {
                document.title = 'tab1';
            }
        });

        window.onfocus = function () {
            document.title = 'tab1';
           
        };
        window.onblur = function () {
            alert('请注意，你切屏了！');
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

2.第二个网页

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;tab1&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;我是页面1&lt;/h1&gt;
    &lt;script&gt;
        document.addEventListener("visibilitychange", function() {
            console.log(document.visibilityState);
            if(document.visibilityState == 'hidden'){
                document.title = '别看tab2了，看我';
            } else if(document.visibilityState == 'visible') {
                document.title = 'tab1';
            }
        });

        window.onfocus = function () {
            document.title = 'tab1';
           
        };
        window.onblur = function () {
            alert('请注意，你切屏了！');
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

3.离开计时

let n = 0;
let isFirst = true; 
window.onfocus = function () {
  if(!isFirst) {
    alert(`请注意，你切屏了！总共离开${n}秒`);
    isFirst = true;
    n = 0;
  }
  document.title = 'tab1';
};
window.onblur = function () {
  isFirst = false;
  setInterval(function() {
    n++;
  }, 1000)
};

学习于juejin 前端小东

想做一条躺平的咸鱼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
监听切换事件（visibilitychang事件）

为什么可以监听浏览器窗口的切换呢？那自然是因为浏览器自带了相关的API了，那就是利用visibilitychange属性，MDN的介绍：当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。所以我只需要注册监听对visibilitychange的事件即可：document.addEventListener("visibilitychange", function() { if(document.visibilityState == 'hidden')
复制链接

扫一扫