Возвращаем пользователя к забытой вкладке — Журнал «Код» программирование без снобизма

В двухтысячных все сайты старались привлечь внимание пользователей любым способом:

мигали вкладками;
обвешивались банерами;
анимировали ссылки и указатели на разные материалы;
ещё чем-то мигали, уже не помним, но точно было.

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

Возвращаем пользователя к забытой вкладке

Что делаем

Сделаем скрипт, который будет следить, активна эта вкладка или нет. Если мы переключились на новую вкладку, а наша осталась висеть где-то на заднем плане — запускаем анимацию названия вкладки. А как только мы переключимся на неё снова — возвращаем ей старое название, которое было до анимации.

Чтобы привлечь внимание пользователя, сделаем так, чтобы на фоновой вкладке по очереди менялось несколько заголовков. Ещё добавим эмодзи, чтоб совсем наверняка.

Наша задача — сделать универсальный скрипт, который достаточно просто добавить на любую страницу, и он будет работать. Это значит, что нам не нужен отдельный файл script.js и что мы всё будем делать прямо на странице, в самом конце перед закрывающим тегом <body>.

Что такое HTML (и почему это важно)

Подключаем jQuery

В скрипте мы будем использовать jQuery — так будет быстрее, хотя при желании всё можно сделать на нативном JavaScript. Подключаем jQuery командой:

 <script src="https://code.jquery.com/jquery-3.6.3.min.js" type="text/javascript"></script>

Если что, можно перейти по этой ссылке и сохранить файл jquery-3.6.3.min.js — тогда можно не ждать его загрузки с чужого сервера, а использовать всё своё.

Готовим базу

Сначала подготовим варианты новых названий для вкладок и запишем их в отдельный массив. Чтобы эмодзи точно отобразились в разных браузерах, запишем их в виде кодов — так надёжнее:

// новые названия вкладки, которые мы будем показывать по очереди var title = ["\ud83d\ude22 Почему вы ушли\u2753", "\ud83d\udcdd Оставьте комментарий!", "\ud83d\ude0d Поделитесь с друзьями!"];

Теперь сделаем функцию, которая при вызове будет по кругу брать новое значение из этого массива и отправлять его в название вкладки. Для этого нам понадобится отдельная переменная — в ней будет храниться текущий номер нового названия.

Сам алгоритм перебора работает так:

Увеличиваем эту переменную на единицу.
Находим длину массива с новыми названиями.
Находим остаток от деления нашей переменной на длину массива.
Этот остаток отправляем в нашу переменную — это и будет номер нового элемента для вывода в название вкладки.
Берём из массива новый текст и отправляем его в браузер, чтобы он сделал его названием вкладки.

// порядковый номер названия, который будем показывать
i = 0;
// формируем новое название
function new_title() {
	// перебираем по кругу все числа от 0 до количества вариантов с названием
  i = (i + 1) % title.length;
  // отправляем новое название на вкладку
  jQuery(document).prop("title", title[i])
}

На старте i равно нулю. После первого запуска i увеличивается на единицу, становится равно 1, и остаток от деления 1 на 3 равен единице. Значит, следующим показываем элемент с индексом 1. Точно так же будет с числом 2. А на третьем шаге остаток от деления 3 на 3 будет равен нулю, поэтому мы снова вернёмся к началу нашего массива с вариантами.

Пишем скрипт

Весь рабочий скрипт будет состоять из одного обработчика события onload() — оно срабатывает, когда страница полностью загрузилась. Как только это произошло — сохраняем в отдельной переменной родное название вкладки и начинаем следить за сменой фокуса на вкладке. Как только пользователь переключился на другую вкладку — с интервалом в 2 секунды начинаем показывать ему новые названия вкладки, а когда он переключится обратно на нашу — возвращаем старое значение.

// когда страница загрузилась
window.onload = function() {
 	// получаем текущее название вкладки
  var a = document.title;
  // добавляем обработчик на смену вкладки — он выполнится, когда мы переключимся на другую вкладку
  jQuery(document).bind("visibilitychange", function() {
		// если вкладка с нашей страницей висит где-то в фоне — включаем таймер и каждые 2 секунды показываем новое название вкладки
		// в противном случае, если страница снова активна, — останавливаем таймер
    document.hidden ? secinterval = setInterval(new_title, 2000) : clearInterval(secinterval);
    // как только вкладка ушла в фон — показываем первое новое название
    // а если вкладка активна — показываем старое название вкладки
    jQuery(document).prop("title", document.hidden ? title[0] : a)
  })

// новые названия вкладки, которые мы будем показывать по очереди
var title = ["\ud83d\ude22 Почему вы ушли\u2753", "\ud83d\udcdd Оставьте комментарий!", "\ud83d\ude0d Поделитесь с друзьями!"];
// порядковый номер названия, который будем показывать
i = 0;
// формируем новое название
function new_title() {
	// перебираем по кругу все числа от 0 до количества вариантов с названием
  i = (i + 1) % title.length;
  // отправляем новое название на вкладку
  jQuery(document).prop("title", title[i])
}
// когда страница загрузилась
window.onload = function() {
 	// получаем текущее название вкладки
  var a = document.title;
  // добавляем обработчик на смену вкладки — он выполнится, когда мы переключимся на другую вкладку
  jQuery(document).bind("visibilitychange", function() {
		// если вкладка с нашей страницей висит где-то в фоне — включаем таймер и каждые 2 секунды показываем новое название вкладки
		// в противном случае, если страница снова активна, — останавливаем таймер
    document.hidden ? secinterval = setInterval(new_title, 2000) : clearInterval(secinterval);
    // как только вкладка ушла в фон — показываем первое новое название
    // а если вкладка активна — показываем старое название вкладки
    jQuery(document).prop("title", document.hidden ? title[0] : a)
  })
 
}

Добавляем скрипт на страницу

Проверим скрипт в деле: сделаем простую тестовую страницу с картинкой, а рядом откроем вторую вкладку и посмотрим, что получится. Чтобы всё заработало, добавим скрипт в самый конец страницы:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Обновляем название вкладки</title>
</head>
<body>
  <img src="https://thecode.media/wp-content/uploads/2023/02/1-1-vosstanovleno-2-1536x1075.png">
</div>
<!-- подключаем jQuery -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" type="text/javascript"></script>
<!-- наш скрипт -->
<script type="text/javascript">
	// новые названия вкладки, которые мы будем показывать по очереди
	var title = ["\ud83d\ude22 Почему вы ушли\u2753", "\ud83d\udcdd Оставьте комментарий!", "\ud83d\ude0d Поделитесь с друзьями!"];
	// порядковый номер названия, который будем показывать
	i = 0;
	// формируем новое название
	function new_title() {
		// перебираем по кругу все числа от 0 до количества вариантов с названием
    i = (i + 1) % title.length;
    // отправляем новое название на вкладку
    jQuery(document).prop("title", title[i])
	}
	// когда страница загрузилась
	window.onload = function() {
	 	// получаем текущее название вкладки
    var a = document.title;
    // добавляем обработчик на смену вкладки — он выполнится, когда мы переключимся на другую вкладку
    jQuery(document).bind("visibilitychange", function() {
  		// если вкладка с нашей страницей висит где-то в фоне — включаем таймер и каждые 2 секунды показываем новое название вкладки
  		// в противном случае, если страница снова активна, — останавливаем таймер
      document.hidden ? secinterval = setInterval(new_title, 2000) : clearInterval(secinterval);
      // как только вкладка ушла в фон — показываем первое новое название
      // а если вкладка активна — показываем старое название вкладки
      jQuery(document).prop("title", document.hidden ? title[0] : a)
    })
	 
	}
</script>

</body>
</html>