Замечали ли вы, когда в соседней вкладке открыта Яндекс почта и приходит письмо, JS проигрывает короткий звук, а favicon вкладки меняется на цифру. Это очень удобно и позволяет быть достаточно оперативным, не используя сомнительный почтовый софт (привет тумберберд).
Похожая ситуация с Контактом. Когда вы не просматриваете страницу или вообще когда свернули браузер.
Как это работает?
Раньше, мы использовали хитрости вроде
$(window).on('mousemove', function () {})
Если мышка над вкладкой то все ок. Если нет то выдаем сообщение. Это работает, но с известной долей ошибок.
на дворе 2015 год и давно появились специальные события браузера, которые сигнализируют нам о нужном событии.
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
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);
}
}
А как же сигнал? Звуковой сигнал, который играет когда приходит письмо в Яндекс Почте.
Это тоже весьма просто.
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 =)
Всего доброго!
