有沒有什麼辦法可以檢測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>