有什么方法可以检测到 IE8 中的窗口当前处于活动状态（显示在活动选项卡/窗口上）？
我知道有像onfocusin/onfocus 这样的事件——但这不是一个完美的解决方案，因为窗口也必须获得焦点才能触发事件——所以当用户只是切换选项卡而不接触窗口本身。
我相信对于这种普通的用例，必须有一些简单、优雅的解决方案。
【问题讨论】：
标签： javascript internet-explorer-8 tabs
我编写了一个 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.');
}
});
插件将检测浏览器是否原生支持 Page Visibility API，并将此信息显示为 $.support.pageVisibility 中的布尔值 (true/false)：
if ($.support.pageVisibility) {
// Page Visibility is natively supported in this browser
}
【讨论】：
.blur|.focus 出现的“问题”的插件，请尝试在此处查看答案 -> Is there a way to detect if a browser window is not currently active?
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;
}
【讨论】：
使用浏览器默认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;
}
【讨论】：
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === 'visible') alert("Hello again");
});
更多信息请参见Page Visibility API on MDN。
【讨论】：
这是一个简单的task用jQuery实现：
$(function() {
window.isActive = true;
$(window).focus(function() { this.isActive = true; });
$(window).blur(function() { this.isActive = false; });
});
全局 isActive 变量确定选项卡/窗口是否处于活动状态。
【讨论】：
.blur|.focus 出现的“问题”的插件，请尝试在此处查看答案 -> Is there a way to detect if a browser window is not currently active?
<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>
【讨论】：