В этой статье я покажу вам, как узнать, когда пользователи меняют вкладки в браузерах, используя JavaScript. Будет весело, полезно посмотреть, как часто пользователь теряет внимание. Вы даже можете использовать его для добавления данных в базу данных (это выходит за рамки этой статьи).

Я знаю два способа решения этой проблемы. Итак, я покажу вам их обоих.


Метод — 1

В этом методе мы будем использовать два прослушивателя событий фокус (когда пользователь фокусируется на вашем сайте или в окне) и размытие (когда пользователь теряет фокус)

На самом деле нам не нужен HTML, потому что, когда пользователи находятся на другой вкладке, они не увидят страницу вашего сайта. Подойдет только JavaScript:

// when the user loses focus
window.addEventListener("blur", () => {
    document.title = "Breakup";
});

// when the user's focus is back to your tab (website) again
window.addEventListener("focus", () => {
    document.title = "Patch Up";
});
Войти в полноэкранный режим

Выйти из полноэкранного режима

Демо-1


Способ — 2

В этом методе нам нужен только один прослушиватель событий (изменение видимости). У него есть свойство, называемое visibilityState который мы можем использовать для обнаружения состояния переключения окна.

document.addEventListener("visibilitychange", () => {
    // it could be either hidden or visible
    document.title = document.visibilityState;    
});
Войти в полноэкранный режим

Выйти из полноэкранного режима

демо-2

Вы можете использовать их, чтобы добавить на свой веб-сайт множество функций, таких как остановка музыки или видео, когда пользователь теряет фокус:

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'visible') {
    music.play();
  } else {
    music.pause();
  }
});
Войти в полноэкранный режим

Выйти из полноэкранного режима

Если вы хотите попробовать это сами, посмотрите ЖИТЬ


Подведение итогов:

Это все, что вам нужно для обнаружения, когда пользователи переключают вкладки. Оба метода работают так, как ожидалось. Вы можете использовать любой из них. Если вам понравилась эта статья, не забудьте поставить ❤️, а если у вас есть какие-либо вопросы или отзывы, не стесняйтесь оставлять их в комментариях ниже. посмотрю в следующем.


🌐 Свяжитесь со мной:

Твиттер
Гитхаб
Инстаграм
Новостная рассылка
LinkedIn
Веб-сайт
Купи мне кофе