Доброго времени суток дорогие друзья! Я думаю вы не раз встречались с развертыванием элементов страницы в полный экран. Это могло быть видео, картинка и т.п. Конечно же вы знаете что для того чтобы развернуть что то в полный экран нам достаточно воспользоваться клавишей f11 и это для тех у кого windows. Но что если нам понадобиться развернуть определенный элемент страницы? К примеру картинку с сертификатом или какое-нибудь важное сообщение.

Для этого в спецификацию html был добавлен специальный метод RequestFullscreen() который позволяет разворачивать выбранный элемент в полный экран.

Рассмотрим следующий код:

<button id="sum" >Окно в полный   экран</button>
<button id="sub" >Стандартный экран</button>
<script>
	document.querySelector('#sum').addEventListener('click', function(){
        if(document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
        }
        else{
            document.documentElement.mozRequestFullScreen();
        }
});
document.querySelector('#sub').addEventListener('click', function(){
    if(document.documentElement.webkitRequestFullscreen) {
        document.webkitCancelFullScreen()
   }
    else{
        document.mozCancelFullScreen();
    }
});
    </script>

здесь мы при нажатии кнопки 'окно в полный экран' сделаем отображение нашего окна сайта в полный экран, тем самым избавившись от панели браузера. У нас есть две кнопки одна делает отображение нашего окна в браузере в полный экран, другая возвращает обратно к стандартному отображению. Мы также воспользовались префиксами для поддержки браузеров google(webkit) и firefoxMozzila(moz).

Метод RequestFullscreen(); развертывает выбранный элемент в полный экран.

Метод CancelFullScreen(); возвращает экран к стандартному состоянию.

Еще вы должны понимать что данные методы работают только при действиях пользователя(разных родах событий кликов и т. п.) это реализовано прежде всего для безопасности. То есть просто так записав в код:

if(document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
        }
        else{
            document.documentElement.mozRequestFullScreen();
        }

они выполняться не будут. Нужны события на определенные, совершаемые действия пользователя.

Мы можем применять данные методы к любым элементам страницы, к примеру :

<img src="fon1.jpg" alt=""/>
<script>
document.querySelector('img').addEventListener('click', function(){
        if(document.documentElement.webkitRequestFullscreen) {

            document.querySelector('img').webkitRequestFullscreen();
        }
        else{
            document.documentElement.mozRequestFullScreen();
        }
});
</script>

если мы кликнем по картинке, она развернется в полный экран. Заметьте для того чтобы выйти из режима полного экрана нам достаточно нажать esc, опять же если у вас windows.

На этом друзья у меня на сегодня все. Надеюсь данная статья была для вас полезна.

Желаю удачи и успехов! Пока!