Для совместимости с Opera и кроссбраузерностью у вас есть несколько вариантов:
1)Используйте API видимости страницы, который хорошо поддерживается во всех браузерах:
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
// Страница не видна
} else {
// Страница видна
}
});
2) Используйте комбинацию прослушивателей событий фокуса/размытия:
let hasFocus = true;
window.addEventListener('focus', () => {
hasFocus = true;
});
window.addEventListener('blur', () => {
hasFocus = false;
});
3) Для более полного обнаружения вы можете создать кроссбраузерное решение:
function checkFocus() {
// Сначала пробуем стандартное свойство
if (typeof document.hasFocus === 'function') {
return document.hasFocus();
}
// Резервный вариант для Opera и старых браузеров
return document.visibilityState === 'visible';
}
Page Visibility API — самый надежный современный подход, поскольку он широко поддерживается и правильно обрабатывает различные состояния видимости, в том числе когда страница находится на фоновой вкладке или в свернутом окне.