Я хочу написать веб-страницу для онлайн-викторины. Основное требование, которое у меня есть, заключается в том, что если человек, принимающий участие в викторине, меняет вкладку или открывает новое окно даже без сворачивания браузера, т.е. если человек пытается посмотреть ответ в каком-то другом окне/вкладке, викторина должна остановиться.
P.S: это не должна быть какая-то очень новая функция HTML5. Я хочу, чтобы она поддерживалась всеми основными браузерами на данный момент.
Вы можете определить, активна ли вкладка или окно, прикрепив к окну слушатель события размытия/фокуса.
В jQuery это будет выглядеть следующим образом
$(window).focus(function() {
//do something
});
$(window).blur(function() {
//do something
});
цитата из этого ответа SO: https://stackoverflow.com/a/1760268/680578
Если вы ориентируетесь на браузеры, которые поддерживают эту функцию, вы можете использовать API видимости страницы, доступный в HTML5. Он не обнаруживает непосредственно изменения вкладок, но обнаруживает изменения видимости. Что включает (но не ограничивается) изменения вкладок.
См. https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API
Лучшая нативная функция, без jQuery.
document.hasFocus
Проверьте ручку, проверьте, что происходит, когда вы переходите по ссылке и обратно на вкладку codepen.