Управление несколькими дисплеями с помощью API управления окнами,Управление несколькими дисплеями с помощью API управления окнами

Получите информацию о подключенных дисплеях и расположите окна относительно этих дисплеев.

Thomas Steiner

Успех: API управления окнами был частью проекта возможностей и теперь доступен в Chrome 100.

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

API управления окнами позволяет вам перечислять дисплеи, подключенные к вашему компьютеру, и размещать окна на определенных экранах.

Примечание. API управления окнами отличается от предложенного свойства «Сегменты видового экрана », которое связано с представлением областей окна, расположенных на отдельных (смежных) дисплеях, например, на складных устройствах.

Примечание. 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

Примечание. Старое имя разрешения window-placement больше не поддерживается .

Прежде чем я смогу использовать 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 . Объект обновляется при размещении окон на разных экранах или при изменении устройства.

Примечание. Последняя реализация API Chromium возвращает метки экрана, предоставленные базовой платформой, например "Built-in Retina Display" , вместо менее информативных заполнителей, таких как "Internal Display 1" .

Событие 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 . Это застало меня врасплох и я закрыл лицо руками .

Паникки, ставший свидетелем кровавой бойни 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 был реализован Майком Вассерманом и Эдриен Уокер . Эта статья была рецензирована Джо Медли , Франсуа Бофором и Кейси Баскс . Спасибо Лауре Торрент Пуч за фотографии.