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

Question

I have a page that opens a word document for the user. Behind, on the page, a 'wait dialog' is rendered to be closed when user closes the opened document. I did some digging and I did not find solution that would work.

Of course I checked this one: Is there a way to detect if a browser window is not currently active? , but it only works when I'm switching tabs, or minimizing browser window. It doesn't detect that the browser opened a window with file, neither the browser getting the focus back because the window with file was closed.

I tested above solution (and others I'm aware of, mostly focusing on hooking up to focus event) on IE11. One complication might be that the new window is opened from the iframe which is in the iframe (don't ask, I can't change that :( ), but I was using window.top, and also checking window.top.document.hidden value, which was all the time false.

EDIT: How to tell if browser/tab is active - this question doesn't solve the problem as well. As I mentioned before, it might be because of these iframes (I'm using window.top to attach events, but still no effect):

Structure:

• Page
  • Iframe triggering action create file
  • iframe implementing creating file
  • iframe adding file to store, and opening the new window

Java script used to implement this actions is included in all iframes and in the page as well. I know this might be vague explanation, and the recommended solution would be to change architecture of this web app...

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

        });