professional_javascript_for_web/ch25/PageVisibilityAPIExample01.htm

<!DOCTYPE html>
<html>
<head>
    <title>Page Visibility Example</title>
    <script src="EventUtil.js"></script>
</head>
<body>
    <p>This page is a demonstration of the Page Visibility API. This is known to work in Internet Explorer 10+ and Chrome.</p>
    <p>Try minimizing the window, or switching to another tab. The page will update with the various states.</p>
    <script>
        function isHiddenSupported(){
            return typeof (document.hidden || document.msHidden || document.webkitHidden) != "undefined";
        }    
        
        function handleVisibilityChange(){
            var output = document.getElementById("output"),
                msg;
                
            if (document.hidden || document.msHidden || document.webkitHidden){
                msg = "Page is now hidden." + (new Date()) + "<br>";
            } else {
                msg = "Page is now visible." + (new Date()) + "<br>";
            }
            
            output.innerHTML += msg;
            
        }
        
        //need to add to both
        EventUtil.addHandler(document, "msvisibilitychange", handleVisibilityChange);
        EventUtil.addHandler(document, "webkitvisibilitychange", handleVisibilityChange);
        
    </script>
    
    <p><script>document.write(isHiddenSupported() ? "Your browser supports the Page Visibility API." : "Your browser does not support the Page Visibility API.");</script></p>
    <div id="output"></div>
</body>
</html>