Получите информацию о подключенных дисплеях и расположите окна относительно этих дисплеев.
API управления окнами
API управления окнами позволяет вам перечислять дисплеи, подключенные к вашему компьютеру, и размещать окна на определенных экранах.
Рекомендуемые варианты использования
Примеры сайтов, которые могут использовать этот API:
- Многооконные графические редакторы типа Gimp могут размещать различные инструменты редактирования в точно расположенных окнах.
- Виртуальные торговые столы могут отображать рыночные тенденции в нескольких окнах, любое из которых можно просматривать в полноэкранном режиме.
- Приложения для слайд-шоу могут отображать заметки докладчика на внутреннем основном экране, а презентацию — на внешнем проекторе.
Как использовать API управления окнами
Проблема
Проверенный временем подход к управлению окнами Window.open()
, к сожалению, не поддерживает дополнительные экраны. Хотя некоторые аспекты этого API кажутся немного архаичными, например параметр windowFeatures
DOMString
, тем не менее, он хорошо служил нам на протяжении многих лет. Чтобы указать положение окна, вы можете передать координаты left
и top
(или screenX
и screenY
соответственно) и передать желаемый размер как width
и height
(или innerWidth
и innerHeight
соответственно). Например, чтобы открыть окно размером 400×300 на расстоянии 50 пикселей слева и 50 пикселей сверху, вы можете использовать следующий код:
const popup = window.open(
'https://example.com/',
'My Popup',
'left=50,top=50,width=400,height=300',
);
Вы можете получить информацию о текущем экране, просмотрев свойство window.screen
, которое возвращает объект Screen
. Это вывод на моем MacBook Pro 13″:
window.screen;
/* Output from my MacBook Pro 13″:
availHeight: 969
availLeft: 0
availTop: 25
availWidth: 1680
colorDepth: 30
height: 1050
isExtended: true
onchange: null
orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
pixelDepth: 30
width: 1680
*/
Как и большинству людей, работающих в сфере технологий, мне пришлось адаптироваться к новой рабочей реальности и создать личный домашний офис. Мой выглядит так, как на фото ниже (если вам интересно, вы можете прочитать полную информацию о моей настройке ). iPad, расположенный рядом с моим MacBook, подключен к ноутбуку через Sidecar , поэтому в любой момент я могу быстро превратить iPad во второй экран.
Если я хочу воспользоваться преимуществом большого экрана, я могу поместить всплывающее окно из примера кода выше на второй экран. Я делаю это так:
popup.moveTo(2500, 50);
Это грубое предположение, поскольку узнать размеры второго экрана невозможно. Информация из window.screen
охватывает только встроенный экран, но не экран iPad. Заявленная width
встроенного экрана составляла 1680
пикселей, поэтому переход на 2500
пикселей может помочь переместить окно на iPad, поскольку я знаю, что оно расположено справа от моего MacBook. Как это сделать в общем случае? Оказывается, есть лучший способ, чем гадать. Таким образом, это API управления окнами.
Обнаружение функций
Чтобы проверить, поддерживается ли API управления окнами, используйте:
if ('getScreenDetails' in window) {
// The Window Management API is supported.
}
Разрешение window-management
Прежде чем я смогу использовать API управления окнами, я должен запросить у пользователя разрешение на это. Разрешение window-management
можно запросить с помощью Permissions API следующим образом:
let granted = false;
try {
const { state } = await navigator.permissions.query({ name: 'window-management' });
granted = state === 'granted';
} catch {
// Nothing.
}
Пока используются браузеры со старым и новым именем разрешения, обязательно используйте защитный код при запросе разрешения, как в примере ниже.
async function getWindowManagementPermissionState() {
let state;
// The new permission name.
try {
({ state } = await navigator.permissions.query({
name: "window-management",
}));
} catch (err) {
return `${err.name}: ${err.message}`;
}
return state;
}
document.querySelector("button").addEventListener("click", async () => {
const state = await getWindowManagementPermissionState();
document.querySelector("pre").textContent = state;
});
Браузер может выбрать динамическое отображение запроса на разрешение при первой попытке использовать любой из методов нового API. Читайте дальше, чтобы узнать больше.
Свойство window.screen.isExtended
Чтобы узнать, подключено ли к моему устройству более одного экрана, я обращаюсь к свойству window.screen.isExtended
. Он возвращает true
или false
. Для моей настройки он возвращает true
.
window.screen.isExtended;
// Returns `true` or `false`.
Метод getScreenDetails()
Теперь, когда я знаю, что текущая настройка является многоэкранной, я могу получить дополнительную информацию о втором экране с помощью Window.getScreenDetails()
. При вызове этой функции появится запрос на разрешение, в котором меня спросят, может ли сайт открываться и размещать окна на моем экране. Функция возвращает обещание, которое разрешается с помощью объекта ScreenDetailed
. На моем MacBook Pro 13 с подключенным iPad оно включает поле screens
с двумя объектами ScreenDetailed
:
await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
oncurrentscreenchange: null
onscreenschange: null
screens: [{
// The MacBook Pro
availHeight: 969
availLeft: 0
availTop: 25
availWidth: 1680
colorDepth: 30
devicePixelRatio: 2
height: 1050
isExtended: true
isInternal: true
isPrimary: true
label: "Built-in Retina Display"
left: 0
onchange: null
orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
pixelDepth: 30
top: 0
width: 1680
},
{
// The iPad
availHeight: 999
availLeft: 1680
availTop: 25
availWidth: 1366
colorDepth: 24
devicePixelRatio: 2
height: 1024
isExtended: true
isInternal: false
isPrimary: false
label: "Sidecar Display (AirPlay)"
left: 1680
onchange: null
orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
pixelDepth: 24
top: 0
width: 1366
}]
}
*/
Информация о подключенных экранах доступна в массиве screens
. Обратите внимание, что значение left
для iPad начинается с 1680
, что соответствует width
встроенного дисплея. Это позволяет мне точно определить, как логически расположены экраны (рядом друг с другом, друг над другом и т. д.). Также теперь для каждого экрана есть данные, показывающие, является ли он isInternal
или isPrimary
. Обратите внимание, что встроенный экран не обязательно является основным экраном .
Поле currentScreen
— это живой объект, соответствующий текущему window.screen
. Объект обновляется при размещении окон на разных экранах или при изменении устройства.
Событие screenschange
Единственное, чего сейчас не хватает, — это способа определить, когда у меня меняются настройки экрана. Новое событие screenschange
делает именно это: оно срабатывает всякий раз, когда изменяется совокупность экранов. (Обратите внимание, что слово «screens» в названии события используется во множественном числе.) Это означает, что событие срабатывает всякий раз, когда новый или существующий экран (физически или виртуально в случае Sidecar) подключается или отключается.
Обратите внимание, что вам необходимо асинхронно искать информацию о новом экране, само событие screenschange
не предоставляет эти данные. Чтобы просмотреть сведения об экране, используйте живой объект из кэшированного интерфейса Screens
.
const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
if (screenDetails.screens.length !== cachedScreensLength) {
console.log(
`The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
);
cachedScreensLength = screenDetails.screens.length;
}
});
Текущее событие currentscreenchange
Если меня интересуют только изменения текущего экрана (то есть значения живого объекта currentScreen
), я могу прослушивать событие currentscreenchange
.
const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
const details = screenDetails.currentScreen;
console.log('The current screen has changed.', event, details);
});
Событие change
Наконец, если меня интересуют только изменения на конкретном экране, я могу прослушать событие change
этого экрана.
const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
console.log('The first screen has changed.', event, firstScreen);
});
Новые возможности полноэкранного режима
До сих пор вы могли запросить отображение элементов в полноэкранном режиме с помощью метода requestFullScreen()
с метким названием. Метод принимает параметр options
, куда вы можете передать FullscreenOptions
. До сих пор его единственным свойством было navigationUI
. API управления окнами добавляет новое свойство screen
, которое позволяет вам определить, на каком экране начинать полноэкранный режим. Например, если вы хотите сделать основной экран полноэкранным:
try {
const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
console.error(err.name, err.message);
}
Полифилл
Невозможно заполнить API управления окнами, но вы можете изменить его форму, чтобы писать код исключительно для нового API:
if (!('getScreenDetails' in window)) {
// Returning a one-element array with the current screen,
// noting that there might be more.
window.getScreenDetails = async () => [window.screen];
// Set to `false`, noting that this might be a lie.
window.screen.isExtended = false;
}
Другие аспекты API, то есть различные события смены экрана и свойство screen
FullscreenOptions
, просто никогда не срабатывают или молча игнорируются соответственно неподдерживающими браузерами.
Демо
Если вы чем-то похожи на меня, вы внимательно следите за развитием различных криптовалют. (На самом деле я делаю это не потому, что люблю эту планету, но ради этой статьи просто предположу, что да.) Чтобы отслеживать криптовалюты, которыми я владею, я разработал веб-приложение, которое позволяет мне наблюдать за криптовалютами, которыми я владею. рынки во всех жизненных ситуациях, например, не вставая с кровати, где у меня есть приличная установка с одним экраном.
Что касается криптовалюты, рынки могут стать беспокойными в любой момент. Если это произойдет, я могу быстро перейти к своему столу, где у меня есть многоэкранная установка. Я могу щелкнуть окно любой валюты и быстро просмотреть полную информацию в полноэкранном режиме на противоположном экране. Ниже приведена моя недавняя фотография, сделанная во время последней кровавой бойни YCY . Это застало меня врасплох и я закрыл лицо руками .
Вы можете поиграть с демо-версией , представленной ниже, или посмотреть ее исходный код на предмет ошибок.
Безопасность и разрешения
Команда Chrome разработала и реализовала API управления окнами, используя основные принципы, определенные в разделе «Управление доступом к мощным функциям веб-платформы» , включая пользовательский контроль, прозрачность и эргономику. API управления окнами предоставляет новую информацию об экранах, подключенных к устройству, увеличивая возможность снятия отпечатков пальцев у пользователей, особенно у тех, у кого несколько экранов последовательно подключены к их устройствам. Чтобы смягчить эту проблему конфиденциальности, доступные свойства экрана ограничены минимумом, необходимым для обычных случаев размещения. Разрешение пользователя требуется для того, чтобы сайты могли получать многоэкранную информацию и размещать окна на других экранах. В то время как Chromium возвращает подробные метки экрана, браузеры могут возвращать менее описательные (или даже пустые метки).
Пользовательский контроль
Пользователь полностью контролирует экспозицию своей установки. Они могут принять или отклонить запрос на разрешение, а также отозвать ранее предоставленное разрешение с помощью функции информации о сайте в браузере.
Контроль предприятия
Пользователи Chrome Enterprise могут управлять несколькими аспектами API управления окнами, как описано в соответствующем разделе настроек групп атомарной политики .
Прозрачность
Тот факт, было ли предоставлено разрешение на использование API управления окнами, отображается в информации о сайте браузера, а также доступен для запроса через API разрешений.
Сохранение разрешений
Браузер сохраняет разрешения. Разрешение можно отозвать через информацию о сайте в браузере.
Обратная связь
Команда Chrome хочет услышать о вашем опыте работы с API управления окнами.
Расскажите нам о дизайне API
Что-то в API работает не так, как вы ожидали? Или вам не хватает методов или свойств, необходимых для реализации вашей идеи? У вас есть вопрос или комментарий по модели безопасности?
- Сообщите о проблеме спецификации в соответствующем репозитории GitHub или добавьте свои мысли к существующей проблеме.
Сообщить о проблеме с реализацией
Вы нашли ошибку в реализации Chrome? Или реализация отличается от спецификации?
- Сообщите об ошибке на сайте new.crbug.com . Обязательно включите как можно больше деталей, простые инструкции по воспроизведению и введите
Blink>Screen>MultiScreen
в поле «Компоненты» . Glitch отлично подходит для быстрого и простого обмена репродукциями.
Показать поддержку API
Планируете ли вы использовать API управления окнами? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты для функций и показывает другим поставщикам браузеров, насколько важно их поддерживать.
- Поделитесь, как вы планируете его использовать, в теме обсуждения WICG .
- Отправьте твит @ChromiumDev, используя хэштег
#WindowManagement
, и сообщите нам, где и как вы его используете. - Попросите других поставщиков браузеров реализовать API.
Полезные ссылки
- Проект спецификации
- Публичный объяснитель
- Демонстрация API управления окнами | Демонстрационный исходный код API управления окнами
- Ошибка отслеживания в Chrome
- Запись ChromeStatus.com
- Компонент Blink:
Blink>Screen>MultiScreen
- Обзор тегов
- Намерение экспериментировать
Благодарности
Спецификацию API управления окнами редактировали Виктор Костан , Джошуа Белл и Майк Вассерман . API был реализован Майком Вассерманом и Эдриен Уокер . Эта статья была рецензирована Джо Медли , Франсуа Бофором и Кейси Баскс . Спасибо Лауре Торрент Пуч за фотографии.