如何判断浏览器/标签是否有效[重复]

本文翻译自：How to tell if browser/tab is active [duplicate]

Possible Duplicate: 可能重复：
Is there a way to detect if a browser window is not currently active? 有没有办法检测浏览器窗口当前是否处于活动状态？

I have a function that is called every second that I only want to run if the current page is in the foreground, ie the user hasn't minimized the browser or switched to another tab. 我有一个每秒调用的函数，如果当前页面在前台，我只想运行，即用户没有最小化浏览器或切换到另一个选项卡。 It serves no purpose if the user isn't looking at it and is potentially CPU-intensive, so I don't want to just waste cycles in the background. 如果用户没有看到它并且可能是CPU密集型的话，它没有用处，所以我不想在后台浪费周期。

Does anyone know how to tell this in JavaScript? 有谁知道如何在JavaScript中讲述这个？

Note: I use jQuery, so if your answer uses that, that's fine :). 注意：我使用jQuery，所以如果你的答案使用它，那很好:)。

---

#1楼

参考：https://stackoom.com/question/7Nv8/如何判断浏览器-标签是否有效-重复

---

#2楼

In addition to Richard Simões answer you can also use the Page Visibility API . 除了RichardSimões的回答，您还可以使用Page Visibility API 。

if (!document.hidden) {
    // do what you need
}

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. 此规范定义了一种方法，供站点开发人员以编程方式确定页面的当前可见性状态，以便开发功能和CPU高效的Web应用程序。

Learn more (2019 update) 了解更多（2019年更新）

• All modern browsers are supporting document.hidden 所有现代浏览器都支持 document.hidden
• http://davidwalsh.name/page-visibility http://davidwalsh.name/page-visibility
• https://developers.google.com/chrome/whitepapers/pagevisibility https://developers.google.com/chrome/whitepapers/pagevisibility
• Example pausing a video when window/tab is hidden 隐藏窗口/选项卡时暂停视频的示例
  https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/ https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/

---

#3楼

You would use the focus and blur events of the window: 您将使用窗口的focus和blur事件：

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

---

To Answer the Commented Issue of "Double Fire" and stay within jQuery ease of use: 回答“双火”的评论问题并保持jQuery的易用性：

$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                break;
            case "focus":
                // do work
                break;
        }
    }

    $(this).data("prevType", e.type);
})

Click to view Example Code Showing it working (JSFiddle) 单击以查看示例代码显示它正常工作（JSFiddle）

---

#4楼

If you are trying to do something similar to the Google search page when open in Chrome, (where certain events are triggered when you 'focus' on the page), then the hover() event may help. 如果您在Chrome中打开时尝试执行类似于Google搜索页面的操作，（当您“关注”页面时会触发某些事件），则hover（）事件可能有所帮助。

$(window).hover(function() {
  // code here...
});

---

#5楼

I would try to set a flag on the window.onfocus and window.onblur events. 我会尝试在window.onfocus和window.onblur事件上设置一个标志。

The following snippet has been tested on Firefox, Safari and Chrome, open the console and move between tabs back and forth: 以下代码段已在Firefox，Safari和Chrome上进行了测试，打开控制台并来回切换标签：

var isTabActive;

window.onfocus = function () { 
  isTabActive = true; 
}; 

window.onblur = function () { 
  isTabActive = false; 
}; 

// test
setInterval(function () { 
  console.log(window.isTabActive ? 'active' : 'inactive'); 
}, 1000);

Try it out here . 在这里尝试一下 。

---

#6楼

Using jQuery: 使用jQuery：

$(function() {
    window.isActive = true;
    $(window).focus(function() { this.isActive = true; });
    $(window).blur(function() { this.isActive = false; });
    showIsActive();
});

function showIsActive()
{
    console.log(window.isActive)
    window.setTimeout("showIsActive()", 2000);
}

function doWork()
{
    if (window.isActive) { /* do CPU-intensive stuff */}
}