Есть ли способ обнаружить, что это окно в настоящее время активно в IE8?
Есть ли способ обнаружить, что окно в настоящее время активно (отображается в активной вкладке/окне) в IE8?
Я знаю, что есть такие события, как onfocusin
/onfocus
- но это не идеальное решение, так как окно также должно получать фокус для события, которое должно быть запущено - так что это не работает, когда пользователь просто переключает вкладки, не касаясь самого окна.
Я считаю, что должно быть какое-то простое, элегантное решение для такого обычного случая использования.
Ответы
Ответ 1
Ive написал плагин jQuery, который делает это: http://mths.be/visibility Он дает вам очень простой API, который позволяет выполнять обратные вызовы, когда страницы изменения состояния видимости.
Он делает это, используя 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
}
Ответ 2
var isActive = false;
function onBlur() {
isActive = false;
};
function onFocus(){
isActive = true;
};
if (/*@[email protected]*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
Ответ 3
Это простая задача для достижения использования jQuery:
$(function() {
window.isActive = true;
$(window).focus(function() { this.isActive = true; });
$(window).blur(function() { this.isActive = false; });
});
Глобальная переменная isActive определяет, насколько вкладка/окно имеет смысл.
Ответ 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>
Ответ 5
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === 'visible') alert("Hello again");
});
См. API видимости страницы в MDN для получения дополнительной информации.
Ответ 6
Использование браузера по умолчанию 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;
}