javascript - 如何检测浏览器选项卡是否获得焦点并位于顶部？

Question

我有一个为用户打开 Word 文档的页面。在页面后面，当用户关闭打开的文档时，会呈现一个“等待对话框”以关闭。我做了一些挖掘，但没有找到可行的解决方案。

当然我检查了这个:Is there a way to detect if a browser window is not currently active? ，但它仅在我切换选项卡或最小化浏览器窗口时才有效。它没有检测到浏览器打开了带有文件的窗口，浏览器也没有重新获得焦点，因为带有文件的窗口已关闭。

我在 IE11 上测试了上述解决方案(以及我知道的其他解决方案，主要关注连接焦点事件)。一个复杂的情况可能是新窗口是从 iframe 中的 iframe 打开的(别问，我无法更改这一点:( )，但我使用的是 window.top，并且还检查了 window.top.document .hidden 值，一直都是 false。

编辑:How to tell if browser/tab is active - 这个问题也没有解决问题。正如我之前提到的，可能是因为这些 iframe(我使用 window.top 附加事件，但仍然没有效果):

结构:

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

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

Answer 1

          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");      
            }

        });