Всем доброго времени суток и сегодня мы с вами рассмотрим так называемый visibility API. С помощью него мы можем определить находится ли страница в активной вкладке браузера или нет. То есть если пользователь зашел на нашу страницу и при этом перешел на другую страницу в соседней вкладке, то мы можем это определить.

Работать с visibility API мы можем через свойство hidden и событие visibilityChange.

Пример:

<div id="time"></div>
    <script>
        var second =  0;
           var id = setInterval(function(){
               if(!document.hidden){
                   second++;
                   document.querySelector('#time').innerHTML = "Пользователь на сайте "+second+" сек.";
               }
           },1000);

    </script>

Здесь у нас идет некий таймер который считает сколько пользователь провел секунд на странице не перезагружая ее. Причем заметьте когда мы переходим в другие вкладки отчет времени останавливается благодаря свойству hidden объекта document.

Свойство hidden возвращает два значения true когда пользователь находится в другой вкладке и следовательно наша страница ему не видна, либо false когда мы находимся на нашей странице и видим ее. Также вам следует понимать что данное действие распространяется только в отношениях текущих вкладок браузера. То есть, если мы откроем сайт в новом окне браузера тем самым перекрыв видимость нашей страницы данное свойство уже не сработает.

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

К примеру:

webkitvisibilitychange для семейства webkit(google, opera,safari)

mozvisibilitychange для mozilla firefox

msVisibilityState для ie

Итак, я рассмотрю на примере работы с браузером google, поэтому:

document.addEventListener('webkitvisibilitychange', function() {
    if(document.hidden){
        document.title = 'Страница не видна';
    }else{
        document.title = 'Моя страница';
 }
});

Здесь у нас при изменении видимости или переходах по вкладкам меняется заголовок нашей страницы. Это вы можете наблюдать в названии вкладки страницы когда мы переходим с текущей страницы на другие вкладки и обратно.

Давайте немного расширим наш код разрешив проблему кроссбраузерности:

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";
}
document.addEventListener(visibilityChange, function() {
    if(document[hidden]){
        document.title = 'Страница не видна';
    }else{
        document.title = 'Моя страница';
    }
});

Теперь данный код будет работать в многих современных браузерах.

На этом дорогие друзья у меня на сегодня все. Желаю удачи и успехов! Пока!