如何检测浏览器选项卡是否聚焦并位于顶部

How to detect if browser tab is focused and on top?

本文关键字：是否 聚焦 于顶部 选项 浏览器 何检测 检测      更新时间：2023-09-26

我有一个为用户打开word文档的页面。在页面的后面，当用户关闭打开的文档时，会显示一个"等待对话框"。我进行了一些挖掘，但没有找到可行的解决方案。

当然，我检查了这个：有没有办法检测浏览器窗口当前是否处于非活动状态，但它只在我切换选项卡或最小化浏览器窗口时起作用。它没有检测到浏览器打开了带有文件的窗口，也没有检测到因为带有文件的窗户被关闭而使浏览器重新获得焦点。

我在IE11上测试了上述解决方案(以及我所知道的其他解决方案，主要集中在连接到焦点事件上(。一个复杂的问题可能是，新窗口是从iframe中的iframe打开的(别问，我不能更改：((，但我使用的是window.top，还检查了window.top.document.hidden值，该值一直为false。

编辑：如何判断浏览器/选项卡是否处于活动状态-这个问题也不能解决问题。正如我之前提到的，这可能是因为这些iframe(我使用window.top附加事件，但仍然没有效果(：

结构：

  • 页码
    • Iframe触发操作创建文件
    • iframe实现创建文件
    • iframe将文件添加到存储，并打开新窗口

用于实现这些操作的Java脚本包含在所有iframe和页面中。我知道这可能是一个模糊的解释，建议的解决方案是改变这个网络应用程序的架构。。。

          var vis = (function(){
            var stateKey, 
                eventKey, 
                keys = {
                        hidden: "visibilitychange",
                        webkitHidden: "webkitvisibilitychange",
                        mozHidden: "mozvisibilitychange",
                        msHidden: "msvisibilitychange"
            };
            for (stateKey in keys) {
                if (stateKey in document) {
                    eventKey = keys[stateKey];
                    break;
                }
            }
            return function(c) {
                if (c) document.addEventListener(eventKey, c);
                return !document[stateKey];
            }
        })();

        vis(function(){
            if(vis()){
                // tween resume() code goes here    
            setTimeout(function(){            
                    console.log("tab is visible - has focus");
                },300);     
            } else {
                // tween pause() code goes here
                console.log("tab is invisible - has blur");      
            }
        });
相关文章：