Полноэкранный режим в браузере

Обновлено: 07.07.2024

Узнайте, как создать полноэкранное окно с помощью JavaScript.

Полноэкранный режим

Как использовать JavaScript для просмотра элемента в полноэкранном режиме.

Нажмите кнопку, чтобы открыть видео в полноэкранном режиме:

Ваш браузер не поддерживает тег видео.

Открыть видео в полноэкранном режиме

Полноэкранное видео

Чтобы открыть элемент в полноэкранном режиме, мы используем метод element.requestFullscreen():

Пример

Полноэкранный документ

Чтобы открыть всю страницу в полноэкранном режиме, используйте document.documentElement вместо document.getElementById("element") . В этом примере мы также используем функцию закрытия, чтобы закрыть полноэкранный режим:

Пример

Вы также можете использовать CSS для оформления страницы, когда она находится в полноэкранном режиме:

Пример

/* Safari */
:-webkit-полноэкранный цвет фона: желтый;
>

/* IE11 */
:-ms-полноэкранный цвет фона: желтый;
>

/* Стандартный синтаксис */
:полноэкранный цвет фона: желтый;
>

Сообщить об ошибке

Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь отправить нам электронное письмо:

Спасибо за помощь!

Ваше сообщение было отправлено в W3Schools.

Лучшие учебные пособия

Лучшие ссылки

Лучшие примеры

Веб-курсы

W3Schools оптимизирована для обучения и повышения квалификации. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, политику конфиденциальности и файлы cookie.

Fullscreen API добавляет методы для представления определенного элемента (и его потомков) в полноэкранном режиме и для выхода из полноэкранного режима, когда он больше не нужен. Это позволяет отображать желаемый контент, например онлайн-игру, на весь экран пользователя, удаляя с экрана все элементы пользовательского интерфейса браузера и другие приложения до отключения полноэкранного режима.

Дополнительные сведения об использовании API см. в статье Руководство по полноэкранному API.

Примечание. Поддержка этого API несколько различается в разных браузерах, многие требуют префиксы поставщиков и/или не реализуют последнюю спецификацию. Подробнее о поддержке этого API см. в разделе «Совместимость с браузерами» ниже. Вы можете рассмотреть возможность использования библиотеки, такой как Fscreen, для независимого от поставщика доступа к полноэкранному API.

Интерфейсы

Fullscreen API не имеет собственных интерфейсов. Вместо этого он дополняет несколько других интерфейсов, добавляя методы, свойства и обработчики событий, необходимые для обеспечения полноэкранных функций. Они перечислены в следующих разделах.

Методы

Fullscreen API добавляет в интерфейсы Document и Element методы, позволяющие включать и выключать полноэкранный режим.

Методы интерфейса документа

Запрашивает, чтобы пользовательский агент переключился из полноэкранного режима обратно в оконный. Возвращает обещание, которое разрешается после полного отключения полноэкранного режима.

Методы интерфейса Element

Просит пользовательский агент перевести указанный элемент (и, соответственно, его потомков) в полноэкранный режим, удаляя с экрана все элементы пользовательского интерфейса браузера, а также все другие приложения. Возвращает обещание, которое разрешается после активации полноэкранного режима.

Свойства

Интерфейс документа предоставляет свойства, которые можно использовать для определения того, поддерживается ли полноэкранный режим и доступен ли он, а также если полноэкранный режим активен в данный момент, какой элемент использует экран.

Свойство fullscreenElement сообщает вам об элементе, который в данный момент отображается в полноэкранном режиме в DOM (или теневой DOM). Если это значение null , документ (или теневой DOM) не находится в полноэкранном режиме.

Свойство fullscreenEnabled указывает, можно ли включить полноэкранный режим. Это неверно, если полноэкранный режим недоступен по какой-либо причине (например, функция «полноэкранный режим» не разрешена или полноэкранный режим не поддерживается).

Устаревшие свойства

Логическое значение, которое является истинным, если в документе есть элемент, отображаемый в данный момент в полноэкранном режиме; в противном случае возвращается false .

Примечание. Вместо этого используйте свойство fullscreenElement в Document или ShadowRoot; если это не null , то это элемент, отображаемый в настоящее время в полноэкранном режиме.

События

Fullscreen API определяет два события, которые можно использовать для обнаружения включения и выключения полноэкранного режима, а также возникновения ошибок в процессе переключения между полноэкранным и оконным режимами.

Отправляется элементу, когда он переходит в полноэкранный режим или выходит из него.

Отправляется элементу, если возникает ошибка при попытке переключить его в полноэкранный режим или из него.

Управление доступом

Доступностью полноэкранного режима можно управлять с помощью Feature Policy. Функция полноэкранного режима идентифицируется строкой «fullscreen» со значением списка разрешений по умолчанию «self» , что означает, что полноэкранный режим разрешен в контекстах документов верхнего уровня, а также во вложенных контекстах просмотра, загруженных из того же источника. как самый верхний документ.

См. Использование политики функций, чтобы узнать больше об использовании политики функций для управления доступом к API.

Примечания по использованию

Пользователи могут выйти из полноэкранного режима, нажав клавишу ESC (или F11 ), не дожидаясь, пока сайт или приложение сделают это программно. Убедитесь, что вы предоставили где-то в своем пользовательском интерфейсе соответствующие элементы пользовательского интерфейса, которые информируют пользователя о том, что эта опция ему доступна.

Примечание. Переход на другую страницу, изменение вкладок или переключение на другое приложение с помощью любого переключателя приложений (или Alt + Tab ) также приводит к выходу из полноэкранного режима.

Примеры

Простое использование в полноэкранном режиме

В этом примере видео представлено на веб-странице. Нажатие клавиши Enter позволяет пользователю переключаться между оконным и полноэкранным представлением видео.

Наблюдение за клавишей Enter

Когда страница загружается, этот код запускается, чтобы настроить прослушиватель событий для отслеживания нажатия клавиши Enter.

Переключение в полноэкранный режим

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

Начнем с просмотра значения атрибута fullscreenElement документа. В реальном развертывании в это время вы захотите проверить версии с префиксом (например, mozFullScreenElement , msFullscreenElement или webkitFullscreenElement ). Если значение равно null , документ в данный момент находится в оконном режиме, поэтому нам нужно переключиться в полноэкранный режим; в противном случае это элемент, который в данный момент находится в полноэкранном режиме. Переключение в полноэкранный режим осуществляется вызовом Element.requestFullscreen() для элемента.

Если полноэкранный режим уже активен ( fullscreenElement не равен null ), мы вызываем exitFullscreen() для документа, чтобы отключить полноэкранный режим.

Нажмите "Полный экран", чтобы переключиться в полноэкранный режим.

Щелкните правой кнопкой мыши любую пустую область на панели вкладок, а затем нажмите "Выйти из полноэкранного режима", чтобы вернуться к стандартному виду.

Google Chrome

Нажмите значок шестеренки в правом верхнем углу экрана, чтобы открыть меню настроек.

Нажмите "Полноэкранный режим", чтобы переключиться в полноэкранный режим.

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

Опера

Нажмите кнопку "Вид" на верхней панели навигации Opera, чтобы открыть меню "Вид".

Нажмите "Полный экран", чтобы начать просмотр в полноэкранном режиме.

Нажмите "F11" на клавиатуре, чтобы вернуться к обычному виду.

Клавиша F11 позволяет переключаться между полноэкранным и стандартным режимами во всех основных веб-браузерах, включая Internet Explorer.

Информация, представленная в этой статье, относится ко всем версиям Google Chrome, Opera 10 и Firefox 22 для Windows. Инструкции могут незначительно или существенно отличаться для других версий программного обеспечения.

Тэмми Коломбо, проживающая в мировой столице живой музыки, продолжает работать в сфере информационных технологий уже более 10 лет. Живя в Остине, Коломбо участвовал в крупных проектах штата Техас, технологических компаний из списка Fortune 500 и различных некоммерческих организаций. Коломбо начал профессионально писать в 2009 году.

Сначала загрузите бесплатное расширение полноэкранного браузера, доступное для всех основных веб-браузеров. Это, нажав на синюю кнопку загрузки, чтобы установить его в вашем любимом веб-браузере.Когда установка будет завершена, вы увидите значок "Полноэкранный режим" на панели инструментов веб-браузера.

Один щелчок по значку полноэкранного режима

Во-вторых, наведите курсор мыши на значок полноэкранного режима на панели инструментов веб-браузера и нажмите эту кнопку полноэкранного браузера. Просмотр видео в новостной статье или на вашей любимой видеоплатформе, такой как YouTube, с сопутствующим контентом может вас отвлекать. И вы можете отвлечься от этого видеоплеера.

Полноэкранный режим

И, наконец, теперь вы можете смотреть только свое любимое видео или фильм в полноэкранном режиме на экране вашего компьютера. Или ваша новостная статья, личная панель инструментов и т. д. И все это без отвлечения внимания от других элементов на этом веб-сайте. Кроме того, без рекламы и мигающего текста вокруг важного контента.

Операция

Экран

Полноэкранный режим — это бесплатное расширение для вашего браузера. Это работает для всех медиафайлов, таких как , и для текущей страницы. Жизнь сейчас на весь экран. Всегда. Везде.

Значок квадратного экрана

Когда установка будет завершена, вы увидите квадратный значок в списке на панели инструментов веб-браузера. И одним нажатием на кнопку вы можете развернуть страницу в полноэкранном режиме. И нажмите клавишу выхода на клавиатуре, чтобы выйти из этого режима.

Полезные функции

Полноэкранное видео

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

Полноэкранное изображение

Помимо видео, также можно развернуть выбранное изображение на весь экран.

Веб-страница в полноэкранном режиме

И хотите, чтобы текущая страница отображалась в полноэкранном режиме без навигации, панели инструментов и адресной строки. Нажмите на значок полноэкранного браузерного расширения, и вся текущая веб-страница откроется на весь экран.

Обычный режим

Если вы находитесь в полноэкранном режиме, вы можете нажать клавишу ESC или клавишу F11 на клавиатуре, чтобы вернуться в обычный режим веб-браузера.

Автоматический полноэкранный режим

Если вы включите этот параметр на странице параметров, вы сможете одним нажатием кнопки воспроизведения развернуть видео в формате HTML5 и YouTube на весь экран. Нажмите кнопку паузы, и он вернется к обычному виду.

Эта технологическая функция также используется в популярном расширении браузера Turn Off the Lights.

Действия кнопки

На странице параметров вы также можете изменить действие кнопки на «Это открывает веб-страницу в полноэкранном режиме», «Это разворачивает окно браузера» или «Это открывает видео прямо в полноэкранном режиме (если видео доступны на этом сайте)".

Языки

Арабский, болгарский, бенгальский, каталанский, чешский, датский, немецкий, английский, английский (Великобритания), английский (США), испанский, испанский (Латинская Америка), эстонский, греческий, фарси, филиппинский, финский, французский, гуджарати, иврит, хинди, хорватский, венгерский, индонезийский, итальянский, японский, корейский, литовский, латышский, малайский, малаялам, маратхи, голландский, норвежский, польский, португальский (Бразилия), португальский (Португалия), румынский, Русский, словацкий, словенский, сербский, шведский, тамильский, телугу, тайский, турецкий, украинский, вьетнамский, китайский (упрощенный), китайский (традиционный)

Установка расширения

Обновления по беспроводной сети

Вы всегда получаете последнюю версию этого расширения для браузера. Если доступна более новая версия, расширение «Полноэкранный режим» автоматически обновляется до последней версии, поэтому вы всегда получаете самые последние и лучшие новые функции. Пакеты обновлений небольшие и совершенно бесплатны.

Доступно

Это расширение браузера, доступное только для современных интернет-браузеров, таких как:

Google Chrome
Сафари
Опера
Файрфокс
Макстон
Яндекс
Смелый
Вивальди
Единый союз
Майкрософт Эдж

Приобрести в этих магазинах

Экспертный обзор прессы

Обзор

Многие блоггеры и журналисты нашли это замечательное расширение для браузера, которое помогает им быстро отображать любимое видео в полноэкранном режиме и не отвлекаться на него.

Часто задаваемые вопросы о полноэкранном браузерном расширении

Что такое полноэкранная кнопка?

Полноэкранный режим – это первое простое и удобное в использовании расширение для браузера, позволяющее отображать текущую активную вкладку в полноэкранном режиме без видимых на экране панелей инструментов. Это доступно для Google Chrome, Safari, Firefox, Opera, Yandex и Microsoft Edge.

Является ли полноэкранный режим бесплатным расширением для браузера?

Да, полноэкранный режим — это бесплатное расширение с открытым исходным кодом для всех современных веб-браузеров. Сюда входят Google Chrome, Safari, Firefox, Opera, Яндекс и Microsoft Edge. И это поможет вам отобразить текущую веб-страницу в полноэкранном режиме или развернуть выбранное изображение на весь экран без видимой панели инструментов веб-браузера.

Вы добавляете рекламу на все веб-сайты, когда я устанавливаю это расширение для полноэкранного браузера?

Нет, я очень серьезно отношусь к конфиденциальности своих пользователей. И расширение полноэкранного браузера не будет делать эти плохие действия. Кроме того, внутри нет скрипта Google Analytics, который определяет активность пользователя в браузере.

Что еще я могу сделать с функцией полноэкранного режима браузера по умолчанию?

С помощью расширения "Полноэкранный браузер" вы можете развернуть веб-страницу в полноэкранном режиме, не отображая панель инструментов веб-браузера. И вы можете щелкнуть прямо по изображению или видео, чтобы вывести только этот контент на полный экран. Это особенно удобно и полезно, когда вам нужен киоск или панель управления на другом экране компьютера.

Какие параметры также доступны специально для видео HTML5?

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

Как установить расширение полноэкранного браузера?

Вы можете загрузить бесплатное расширение полноэкранного браузера, нажав кнопку загрузки на этой полноэкранной веб-странице. Затем нажмите синюю кнопку загрузки, чтобы загрузить расширение в свой любимый веб-браузер.

Как удалить расширение полноэкранного браузера?

Чтобы удалить это расширение полноэкранного браузера, щелкните правой кнопкой мыши значок полноэкранного режима на панели инструментов веб-браузера. И в контекстном меню выберите пункт «Удалить из Chrome», или «Удалить из Microsoft Edge», или «Удалить из Opera», или любое другое имя веб-браузера Chromium (например, Brave, Vivaldi, Yandex).

Примечание. Доступно только в последней версии Google Chrome 33, Safari 10, Opera 15, Firefox 64, Microsoft Edge 76 и выше.

Читайте также:

Полноэкранный режим в браузере