Since originally writing this answer, a new specification has reached recommendation status thanks to the W3C.(自从最初编写此答案以来,由于有了W3C,新的规范已达到推荐状态。)
The Page Visibility API (on MDN ) now allows us to more accurately detect when a page is hidden to the user.(现在, 页面可见性API (在MDN上 )使我们能够更准确地检测页面何时向用户隐藏。)
document.addEventListener("visibilitychange", onchange);
Current browser support:(当前的浏览器支持:)
- Chrome 13+(铬13+)
- Internet Explorer 10+(Internet Explorer 10+)
- Firefox 10+(Firefox 10+)
- Opera 12.10+ [ read notes ](Opera 12.10+ [ 阅读笔记 ])
The following code falls back to the less reliable blur/focus method in incompatible browsers:(以下代码会退回到不兼容浏览器中不太可靠的模糊/聚焦方法:)
(function() {
var hidden = "hidden";
// Standards:
if (hidden in document)
document.addEventListener("visibilitychange", onchange);
else if ((hidden = "mozHidden") in document)
document.addEventListener("mozvisibilitychange", onchange);
else if ((hidden = "webkitHidden") in document)
document.addEventListener("webkitvisibilitychange", onchange);
else if ((hidden = "msHidden") in document)
document.addEventListener("msvisibilitychange", onchange);
// IE 9 and lower:
else if ("onfocusin" in document)
document.onfocusin = document.onfocusout = onchange;
// All others:
else
window.onpageshow = window.onpagehide
= window.onfocus = window.onblur = onchange;
function onchange (evt) {
var v = "visible", h = "hidden",
evtMap = {
focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
};
evt = evt || window.event;
if (evt.type in evtMap)
document.body.className = evtMap[evt.type];
else
document.body.className = this[hidden] ? "hidden" : "visible";
}
// set the initial state (but only if browser supports the Page Visibility API)
if( document[hidden] !== undefined )
onchange({type: document[hidden] ? "blur" : "focus"});
})();
onfocusin
and onfocusout
are required for IE 9 and lower , while all others make use of onfocus
and onblur
, except for iOS, which uses onpageshow
and onpagehide
.(对于IE 9及更低版本的IE 9,需要 onfocusin
和onfocusout
,而除iOS使用onpageshow
和onpagehide
iOS之外,所有其他功能都需要使用onfocus
和onblur
。)
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…