Замечали ли вы, когда в соседней вкладке открыта Яндекс почта и приходит письмо, JS проигрывает короткий звук, а favicon вкладки меняется на цифру. Это очень удобно и позволяет быть достаточно оперативным, не используя сомнительный почтовый софт (привет тумберберд).
Похожая ситуация с Контактом. Когда вы не просматриваете страницу или вообще когда свернули браузер.
Как это работает?
Раньше, мы использовали хитрости вроде
$(window).on('mousemove', function () {})
Если мышка над вкладкой то все ок. Если нет то выдаем сообщение. Это работает, но с известной долей ошибок.
на дворе 2015 год и давно появились специальные события браузера, которые сигнализируют нам о нужном событии.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | window.onChangeVisibility = function (callback) { var hidden, visibilityChange; if ( typeof document.hidden !== "undefined" ) { hidden = "hidden" ; visibilityChange = "visibilitychange" ; } else if ( typeof document.mozHidden !== "undefined" ) { hidden = "mozHidden" ; visibilityChange = "mozvisibilitychange" ; } else if ( typeof document.msHidden !== "undefined" ) { hidden = "msHidden" ; visibilityChange = "msvisibilitychange" ; } else if ( typeof document.webkitHidden !== "undefined" ) { hidden = "webkitHidden" ; visibilityChange = "webkitvisibilitychange" ; } function handleVisibilityChange() { if (callback && callback.call) { callback.call(_this, document[hidden]); } } if ( typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined" ) { return ; } document.addEventListener(visibilityChange, handleVisibilityChange, false ); } |
Со строки 3 по 10 мы выбираем нужные вендорные префиксы. Дело в том, что разные браузеры вводили эту функцию по разному и пока не пришли к общему решению. Поэтому не заморачивайтесь. Просто скопируйте эту часть кода.
Далее, мы проверяем существует ли у документа метод addEventListener
. Его может не быть в старых версиях IE. В этом случае пользователю уже ничего не поможет)
Далее вешаем стандартным образом обработчик на событие hidden
.
Как пользоваться
onChangeVisibility(function (hidden) { if (hidden) { changeIcon('ring.png') } else { changeIcon('favicon.ico') } });
Когда вы свернете вкладку, вызовется функция changeIcon. Она сменит favicon вкладки и пользователь узнает о том, что мы по нему скучаем =)
Осталось написать changeIcon
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | changeIcon = function (src) { if (!document.head) { document.head = document.getElementsByTagName( 'head' )[0]; } var link = null , oldLink = document.getElementById( 'dynamic-favicon' ); if (src) { link = document.createElement( 'link' ); link.id = 'dynamic-favicon' ; link.rel = 'shortcut icon' ; link.href = src; } if (oldLink) { document.head.removeChild(oldLink); } if (link) { document.head.appendChild(link); } } |
А как же сигнал? Звуковой сигнал, который играет когда приходит письмо в Яндекс Почте.
Это тоже весьма просто.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function checkEmail() { $.getJSON( 'index.php?action=checkemail' , function (resp){ if (resp.hasNewEmails) { changeIcon( 'ring.png' ); var audio = new Audio( 'ring.mp3' ); audio.play(); } }); } var interval = 0; onChangeVisibility( function (hidden){ clearInterval(interval); if (hidden) { interval = setInterval(checkEmail, 5000); } }); |
При сворачивании вкладки, или при переходе на другую, обработчик запускает циклически функцию checkEmail
. Если сервер сообщил о новом письме, то проигрывает мелодию ring.mp3
Как только вкладка развернута, цикл уничтожается. Так оно и работает. Для большего эффекта можно воспользоваться мелодией ramstain.mp3
=)
Всего доброго!