有没有什么办法可以检测IE8当前活动的窗口？

Question

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

我知道有像onfocusin/onfocus事件 - 但是这不是一个完美的解决方案，因为窗口也必须接收焦点的事件被解雇 - 因此，当用户只需切换标签页也不会触及这不起作用窗户本身。

我相信这样的普通用例必须有一些简单而优雅的解决方案。

Answer 1

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

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

全局isActive变量确定阉羊的标签/窗口是acive。

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插件，做到这一点：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 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>