在HTML 5中，你也可以使用:

onpageshow:当窗口变得可见时运行的脚本 onpagehide:当窗口隐藏时运行的脚本

See:

https://developer.mozilla.org/en-US/docs/Web/Events/pageshow https://developer.mozilla.org/en-US/docs/Web/Events/pagehide

在GitHub上有一个简洁的库:

https://github.com/serkanyersen/ifvisible.js

例子:

// If page is visible right now
if( ifvisible.now() ){
  // Display pop-up
  openPopUp();
}

我已经在我拥有的所有浏览器上测试了1.0.1版本，并可以确认它适用于:

的问世,IE9 FF 26.0 Chrome 34.0

．.． 可能还有所有更新的版本。

不完全适用于:

IE8 -总是指示标签/窗口当前是活跃的(.now()总是为我返回true)

这真的很棘手。考虑到以下要求，似乎没有解决方案。

该页包括您无法控制的iframe 您希望跟踪可见性状态更改，而不管更改是由选项卡更改(ctrl+ TAB)或窗口更改(alt+ TAB)触发的。

这是因为:

页面可视性API可以可靠地告诉您一个选项卡更改(即使使用iframes)，但它不能告诉您用户何时更改了窗口。 监听窗口模糊/聚焦事件可以检测alt+选项卡和ctrl+选项卡，只要iframe没有焦点。

考虑到这些限制，可以实现一个组合的解决方案 -页面可见性API -窗口模糊/聚焦 ——document.activeElement

能够:

1)当父页有焦点时按ctrl+tab: YES 2) iframe有焦点时按ctrl+tab: YES 3)当父页有焦点时，alt+tab: YES 4)当iframe有focus时，alt+tab: NO <——bummer

当iframe有焦点时，你的模糊/焦点事件根本不会被调用，页面可视性API也不会在alt+选项卡上触发。

我以@AndyE的解决方案为基础，在这里实现了这个(几乎很好的)解决方案: https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test1.html (对不起，我有一些麻烦与JSFiddle)。

这也可以在Github上找到:https://github.com/qmagico/estante-components

这适用于铬/铬。 它在firefox上工作，除了它不加载iframe内容(知道为什么吗?)

无论如何，为了解决最后一个问题(4)，你能做的唯一方法是监听iframe上的模糊/聚焦事件。 如果你对iframe有一些控制，你可以使用postMessage API来做到这一点。

https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test2.html

我还没有在足够多的浏览器上测试这个功能。 如果你能找到更多关于哪里不行的信息，请在下面的评论中告诉我。

我为我的应用程序创建了一个Comet Chat，当我收到来自我使用的另一个用户的消息时:

if(new_message){
    if(!document.hasFocus()){
        audio.play();
        document.title="Have new messages";
    }
    else{
        audio.stop();
        document.title="Application Name";
    } 
}

我会使用jQuery，因为这样你所要做的就是:

$(window).blur(function(){
  //your code here
});
$(window).focus(function(){
  //your code
});

至少对我有用。

这对我很有效

document.addEventListener("visibilitychange", function() {
      document.title = document.hidden ? "I'm away" : "I'm here";
});

演示:https://iamsahilralkar.github.io/document-hidden-demo/