API управления окнами

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

Исторически мы использовали Window.open() для управления окнами браузера, связанными с текущим приложением — открытие новых окон, изменение размера и закрытие существующих окон и т. д. Например, чтобы открыть окно размером 400×300 пикселей, смещенное на 50 пикселей от левого и верхнего края экрана:

const myWindow = window.open(
  "https://example.com/",
  "myWindow",
  "left=50,top=50,width=400,height=300",
);

Вы можете получить информацию о экране из свойства Window.screen, например, о доступном пространстве для размещения окон.

Однако вышеуказанные функции ограничены. Window.screen возвращает данные только о главном экране, а не о дополнительных дисплеях, доступных на устройстве. Для перемещения окна на дополнительный дисплей можно использовать Window.moveTo(), но вам придется угадывать координаты, основываясь на его расположении относительно главного дисплея.

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

Подробную информацию об использовании см. в разделе Использование API управления окнами.

API управления окнами полезно в таких случаях:

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

Для управления разрешением на использование API управления окнами можно использовать window-management Permissions-Policy. В частности:

• Использование метода Window.getScreenDetails(). Если заблокировано, его Promise отклонится с исключением NotAllowedError.
• Запрос свойства Window.screen.isExtended. Если заблокировано, оно всегда вернёт false.

Разработчики могут явно предоставить разрешение <iframe> использовать API управления окнами с помощью атрибута allow:

<iframe src="3rd-party.example" allow="window-management"></iframe>

ScreenDetails Безопасный контекст

Представляет подробности всех экранов, доступных на устройстве пользователя.

ScreenDetailed Безопасный контекст

Представляет подробную информацию об одном конкретном экране, доступном на устройстве пользователя.

Событие Screen change Безопасный контекст

Срабатывает на определенном экране, когда он изменяется каким-либо образом, например, доступная ширина или высота, или ориентация.

Screen.isExtended Безопасный контекст

Логическое свойство, которое возвращает true , если на устройстве пользователя несколько экранов, и false если нет.

Element.requestFullscreen(), опция screen

Указывает, на каком экране вы хотите разместить элемент в полноэкранном режиме.

Window.getScreenDetails() Безопасный контекст

Возвращает Promise, который завершается с объектом ScreenDetails.

Полные примеры вы можете найти здесь:

• Базовая среда обучения многооконным приложениям (см. исходный код).
• Многооконная игра-платформер (см. исходный код).
• Демонстрация торговой площадки, вдохновленная Элмером (см. исходный код).
• Демонстрация размещения окон (см. исходный код).