监听浏览器窗口切换

最新推荐文章于 2025-05-14 19:34:15 发布

原创最新推荐文章于 2025-05-14 19:34:15 发布 · 791 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #javascript #前端

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍如何使用JavaScript实现在Chrome、Safari和Firefox等浏览器中监听窗口切换事件，以便实时根据用户的操作来控制数据流，如开启或关闭流，适用于网页应用的用户体验优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听浏览器窗口切换

 /**
   * 切换浏览器窗口
   */
function changeWindowsTab() {
            // chrome sougou
            if ("webkitVisibilityState" in document) {
                document.addEventListener("webkitvisibilitychange", () => {
                    if (document.webkitVisibilityState === "hidden") {
                        // 离开了，对数据进行处理，例如关闭流
                        window.postMessage({leave: true}, "*")
                        
                    } else {
                        // 回来了，对数据处理，如开启流
                        window.postMessage({leave: false}, "*")
                    }
                });
            }

            // IE
            if ("msvisibilitychange" in document) {
                document.addEventListener("msvisibilitychange", () => {
                    if (document.msVisibilityState === "hidden") {
                       // 离开了，对数据进行处理，例如关闭流
                        window.postMessage({leave: true}, "*")
                    } else{
                         // 回来了，对数据处理，如开启流
                        window.postMessage({leave: false}, "*")
                    }
                });
            }

            // FF
            if("mozvisibilitychange" in document) {
                document.addEventListener("mozvisibilitychange", () => {
                    if (document.mozVisibilityState === "hidden") {
                        // 离开了，对数据进行处理，例如关闭流
                        window.postMessage({leave: true}, "*")
                    } else{
                         // 回来了，对数据处理，如开启流
                        window.postMessage({leave: false}, "*")
                    }
                });
            }
        }