Question

IE8中是否有办法检测窗口当前是否处于活动状态（正在活动选项卡/窗口中显示）？

我知道有onfocusin / onfocus之类的事件 - 但这不是一个完美的解决方案，因为窗口也必须获得要触发的事件的焦点 - 所以这不起作用用户只需切换标签而不触及窗口本身。

我认为必须为这种普通用例提供一些简单，优雅的解决方案。

Answer 1

我编写了一个执行此操作的jQuery插件：http://mths.be/visibility它为您提供了一个非常简单的API，允许您在页面的可见性状态发生变化时执行回调。

通过使用支持它的the Page Visibility API，并在旧浏览器中使用旧的focus和blur来实现此目的。

演示： http://mathiasbynens.be/demo/jquery-visibility

此插件只提供两个自定义事件供您使用：show和hide。当页面可见性状态发生变化时，将触发相应的事件。

您可以单独使用它们：

$(document).on('show', function() {
  // the page gained visibility
});

...和...

$(document).on('hide', function() {
  // the page was hidden
});

由于大多数情况下您需要同时进行这两项活动，因此最佳选择是使用事件地图。这样，您可以一次绑定两个事件处理程序：

$(document).on({
  'show': function() {
    console.log('The page gained visibility; the `show` event was triggered.');
  },
  'hide': function() {
    console.log('The page lost visibility; the `hide` event was triggered.');
  }
});

该插件将检测浏览器是否本机支持页面可见性API，并在true中将此信息公开为布尔值false / $.support.pageVisibility：

if ($.support.pageVisibility) {
  // Page Visibility is natively supported in this browser
}

Answer 2


var isActive = false;
function onBlur() {
    isActive = false;
};
function onFocus(){
    isActive = true;
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
}

Answer 3

使用jQuery实现这是一个简单的task：

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

全局isActive变量确定选项卡/窗口是否有效。

Answer 4

<script>

    // Adapted slightly from Sam Dutton
    // Set name of hidden property and visibility change event
    // since some browsers only offer vendor-prefixed support
    var hidden, state, visibilityChange; 
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
        state = "mozVisibilityState";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
        state = "msVisibilityState";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
        state = "webkitVisibilityState";
    }
    // Add a listener that constantly changes the title
    document.addEventListener(visibilityChange, function() {
        document.title = document[state];
    }, false);

    // Set the initial value
    document.title = document[state];

</script>

Answer 5

document.addEventListener("visibilitychange", () => { 
    if (document.visibilityState === 'visible') alert("Hello again"); 
});

有关更多信息，请参见Page Visibility API on MDN。

Answer 6

使用浏览器默认的Page Visibility API。

function isPageHidden(){
    if (typeof(document.hidden) === 'boolean') return document.hidden;
    if (typeof(document.msHidden) === 'boolean') return document.msHidden;
    if (typeof(document.webkitHidden) === 'boolean') return document.webkitHidden;
    if (typeof(document.mozHidden) === 'boolean') return document.mozHidden;
    else return undefined;
}

有没有办法在IE8中检测到该窗口当前是否处于活动状态？

6 个答案: