Полноэкранный режим в JavaScript
Относительно недавно один из моих учеников спросил меня: как сделать так, чтобы при нажатии на кнопку элемент страницы (параграф, картинка и т.д.) стали бы отображаться на полный экран (Fullscreen).
К счастью для этого существует встроенный браузерный механизм под названием Fullscreen API.
Прикладной интерфейс Fullscreen APIПрикладной интерфейс Fullscreen API предоставляет два метода, два события и одно свойство.
- Метод Element.requestFullscreen() переводит элемент страницы в полноэкранный режим.
- Метод document.exitFullscreen() выходит из полноэкранного режима (всегда вызывается на объекте document).
- Событие fullscreenchange возникает, когда элемент входит в полноэкранный режим или выходит из него
- Событие fullscreenerror возникает, когда элемент не может быть переведен в полноэкранный режим
- Свойство document.fullscreenElement сообщает какой из элементов находится в полноэкранном режиме на странице в данный момент
Пример
Представим, что у нас есть кнопка, которая, будучи нажатой, переводит всю страницу в полноэкранный режим.
<button data-toggle-fullscreen>Переключить в полноэкранный
режим</button>
Для функционирования этой кнопки, в первую очередь необходимо создать слушатель для событий клика только по данной кнопке. Это делается следующим образом.
document.addEventListener('click', function(event) {
// игнорирование событий, которые произошли не на данной кнопке
if( !event.target.hasAttribute('data-toggle-fullscreen') ) return;
}, false );
Затем, нам необходимо использовать свойство document.fullscreenElement для того, чтобы проверить находится ли уже какой-либо элемент страницы в полноэкранном режиме или нет. Если да, то мы используем метод document.exitFullscreen() для выхода из полноэкранного режима. В противном случае, вызовем requestFullscreen() на объекте document.documentElement.
document.addEventListener('click', function (event) {
// игнорирование событий, которые произошли не на данной кнопке
if (!event.target.hasAttribute('data-toggle-fullscreen')) return;
// если элемент уже в полноэкранном режиме, выйти из него
// В противном случае войти в полный экран
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
}
}, false);
Совместимость с браузерами
Fullscreen API работает во всех современных браузерах, в том числе в IE11 и выше. Однако, многие браузеры используют префиксные имплементации (как, mozRequestFullscreen) вместо стандартных.
Поэтому, чтобы данная функциональность работала во всех браузерах стандартным образом, нужно использовать полифилы для requestFullscreen(), exitFullscreen() и fullscreenElement, которые дают возможность использовать методы Fullscreen API без префиксов вендоров.
А, если вам необходимо использовать еще и события, то в этом случае я рекомендую вам полнофункциональный полифил Fullscreen API Polyfill. На этом все. Спасибо за внимание!
-
Создано 13.09.2018 10:20:44
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.