检查站点是否在前台 [英] Check if site is in foreground

问题描述

我想通过JavaScript检查我的网站是否在前台。但是在阅读所有内容之前不要回答，因为你会直接对我说我应该这个：

I would like to check if my website is in foreground with JavaScript. But don't answer before reading everything because you would directly say to me that I should do this:

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

但问题是我的页面上有来自第三方的iframe，如果用户点击了iframe，则窗口模糊事件会被触发但是用户仍然在我的页面上。我试图通过检查如果 document.activeElement 是一个来解决这个问题。模糊的iframe ：

But the problem is that I've got an iframe from a third party on my page and if the user clicks on the iframe the window blur event gets fired but the user is acctualy still on my page. I tried to fix this by checking 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然后再点击另一个页面时，我无法检查页面是否不在前台应用程序。

The problem here is that I'm not able to check if the page is not in foreground anymore when a user clicks on the iframe first and then on another application.

那么如果网站中有iframe，我怎么能检查网站是否在前台呢？

So how can I check if the site is in foreground when it got an iframe in it?

推荐答案

你应该可以使用页面可见性API 。

这规范为站点开发人员定义了一种方法
以编程方式确定页面的当前可见性状态，以
为单位开发电源和CPU高效的Web应用程序。

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

了解详情

• http://davidwalsh.name/page-visibility


• https://developers.google.com/chrome/whitepapers/pagevisibility



Learn more

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


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


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

这篇关于检查站点是否在前台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！