我有JavaScript，它周期性地执行活动。当用户没有在看站点时(例如，窗口或选项卡没有焦点)，最好不要运行。
是否有一种方法可以使用JavaScript来做到这一点?
我的参考点:如果你正在使用的窗口不活跃，Gmail聊天就会播放声音。
当前回答
从最初编写这个答案开始，由于W3C，一个新的规范已经达到了推荐状态。页面可见性API(在MDN上)现在允许我们更准确地检测页面何时对用户隐藏。
document.addEventListener("visibilitychange", onchange);
当前浏览器支持:
铬13 + Internet Explorer 10+ Firefox 10 + Opera 12.10+[阅读笔记]
下面的代码在不兼容的浏览器中退回到不太可靠的模糊/聚焦方法:
(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"});
})();
ie9及以下版本需要onfocusin和onfocusout，而所有其他都使用onfocus和onblur，除了iOS，它使用onpageshow和onpagehide。
其他回答
我重读了@daniel-buckmaster的版本 我没有做多次尝试，但是，代码对我来说似乎更优雅…
// on-visibility-change.js v1.0.1, based on https://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active#38710376
function onVisibilityChange(callback) {
let d = document;
let visible = true;
let prefix;
if ('hidden' in d) {
prefix = 'h';
} else if ('webkitHidden' in d) {
prefix = 'webkitH';
} else if ('mozHidden' in d) {
prefix = 'mozH';
} else if ('msHidden' in d) {
prefix = 'msH';
} else if ('onfocusin' in d) { // ie 9 and lower
d.onfocusin = focused;
d.onfocusout = unfocused;
} else { // others
window.onpageshow = window.onfocus = focused;
window.onpagehide = window.onblur = unfocused;
};
if (prefix) {
visible = !d[prefix + 'idden'];
d.addEventListener(prefix.substring(0, prefix.length - 1) + 'visibilitychange', function() {
(d[prefix + 'idden'] ? unfocused : focused)();
});
};
function focused() {
if (!visible) {
callback(visible = true);
};
};
function unfocused() {
if (visible) {
callback(visible = false);
};
};
};
如果你想对整个浏览器模糊: 正如我所评论的，如果浏览器失去焦点，建议的事件都不会触发。我的想法是在循环中计数，并在事件发生时重置计数器。如果计数器达到限制，我做一个位置。请转到另一页。如果你在开发工具上工作，这也会触发。
var iput=document.getElementById("hiddenInput");
,count=1
;
function check(){
count++;
if(count%2===0){
iput.focus();
}
else{
iput.blur();
}
iput.value=count;
if(count>3){
location.href="http://Nirwana.com";
}
setTimeout(function(){check()},1000);
}
iput.onblur=function(){count=1}
iput.onfocus=function(){count=1}
check();
这是在FF上成功测试的草稿。
var visibilityChange = (function (window) {
var inView = false;
return function (fn) {
window.onfocus = window.onblur = window.onpageshow = window.onpagehide = function (e) {
if ({focus:1, pageshow:1}[e.type]) {
if (inView) return;
fn("visible");
inView = true;
} else if (inView) {
fn("hidden");
inView = false;
}
};
};
}(this));
visibilityChange(function (state) {
console.log(state);
});
http://jsfiddle.net/ARTsinn/JTxQY/
从最初编写这个答案开始，由于W3C，一个新的规范已经达到了推荐状态。页面可见性API(在MDN上)现在允许我们更准确地检测页面何时对用户隐藏。
document.addEventListener("visibilitychange", onchange);
当前浏览器支持:
铬13 + Internet Explorer 10+ Firefox 10 + Opera 12.10+[阅读笔记]
下面的代码在不兼容的浏览器中退回到不太可靠的模糊/聚焦方法:
(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"});
})();
ie9及以下版本需要onfocusin和onfocusout，而所有其他都使用onfocus和onblur，除了iOS，它使用onpageshow和onpagehide。
这真的很棘手。考虑到以下要求，似乎没有解决方案。
该页包括您无法控制的iframe 您希望跟踪可见性状态更改，而不管更改是由选项卡更改(ctrl+ TAB)或窗口更改(alt+ TAB)触发的。
这是因为:
页面可视性API可以可靠地告诉您一个选项卡更改(即使使用iframes)，但它不能告诉您用户何时更改了窗口。 监听窗口模糊/聚焦事件可以检测alt+选项卡和ctrl+选项卡，只要iframe没有焦点。
考虑到这些限制，可以实现一个组合的解决方案 -页面可见性API -窗口模糊/聚焦 ——document.activeElement
能够:
1)当父页有焦点时按ctrl+tab: YES 2) iframe有焦点时按ctrl+tab: YES 3)当父页有焦点时，alt+tab: YES 4)当iframe有focus时，alt+tab: NO <——bummer
当iframe有焦点时，你的模糊/焦点事件根本不会被调用，页面可视性API也不会在alt+选项卡上触发。
我以@AndyE的解决方案为基础，在这里实现了这个(几乎很好的)解决方案: https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test1.html (对不起，我有一些麻烦与JSFiddle)。
这也可以在Github上找到:https://github.com/qmagico/estante-components
这适用于铬/铬。 它在firefox上工作，除了它不加载iframe内容(知道为什么吗?)
无论如何，为了解决最后一个问题(4)，你能做的唯一方法是监听iframe上的模糊/聚焦事件。 如果你对iframe有一些控制，你可以使用postMessage API来做到这一点。
https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test2.html
我还没有在足够多的浏览器上测试这个功能。 如果你能找到更多关于哪里不行的信息，请在下面的评论中告诉我。
