javascript - 检查网站是否在前台

Question

我想检查我的网站是否在前台使用 JavaScript。但是在阅读所有内容之前不要回答，因为你会直接对我说我应该做 this :

$(window)
    .focus(function() {
        console.log("focus");
    })
    .blur(function() {
        console.log("blur");
    });​

但问题是我的页面上有来自第三方的 iframe，如果用户单击 iframe，窗口模糊事件将被触发，但用户实际上仍在我的页面上。我试图通过检查 if document.activeElement is an iframe on blur 来解决这个问题:

$(window)
    .focus(function() {
        console.log("focus");
    })
    .blur(function() {
        console.log("blur");
        if (document.activeElement.tagName.toLowerCase() == "iframe") {
            console.log("still focus");
        }
    });​

这里的问题是，当用户先点击 iframe 然后再点击另一个应用程序时，我无法检查页面是否不再位于前台。

那么当网站中有 iframe 时，如何检查该网站是否在前台？

Answer 1

您应该能够使用 Page Visibility API .

This specification defines a means for site developers toprogrammatically determine the current visibility state of the page inorder to develop power and CPU efficient web applications.

了解更多

• http://davidwalsh.name/page-visibility
• https://developers.google.com/chrome/whitepapers/pagevisibility

例子

• http://www.samdutton.com/pageVisibility/