是否有任何方法可以检测IE8中该窗口当前处于活动状态

Is there any way to detect that window is currently active in IE8?

本文关键字：窗口 活动状态 IE8 任何 方法 检测 是否      更新时间：2023-09-26

是否有任何方法可以检测IE8中窗口当前处于活动状态（显示在活动选项卡/窗口上）？

我知道有像onfocusin/onfocus这样的事件，但这不是一个完美的解决方案，因为窗口也必须接收焦点才能触发事件，所以当用户只切换选项卡而不触摸窗口本身时，这是不起作用的。

对于这种普通的用例，我相信必须有一些简单、优雅的解决方案。

我已经编写了一个jQuery插件，它可以做到这一点：http://mths.be/visibility它为您提供了一个非常简单的API，允许您在页面的可见性状态更改时执行回调。

它通过使用支持的页面可见性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，并在$.support.pageVisibility:中将此信息公开为布尔值（true/false）

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


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;
}

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

有关详细信息，请参阅MDN上的页面可见性API。

使用浏览器默认的页面可见性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;
}

这是使用jQuery:实现的一项简单任务

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

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

<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>

要检查窗口当前是否处于活动状态，请使用：

document.hasFocus();

如果窗口当前处于活动状态，它将返回true，否则返回false。

要检查窗口当前是否可见，请使用：

document.visibilityState;

它有两种状态，visible和invisible。

相关文章：