Новая пробная версия Origin для полноэкранных всплывающих окон

Томас Штайнер

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

  1. Из главного окна приложения вызывается метод window.open() , требующий жеста пользователя, например нажатия на кнопку « Открыть всплывающее окно» .
  2. Из всплывающего окна вызывается метод Element.requestFullscreen() , который также требует жеста пользователя, например нажатия на кнопку « Войти в полноэкранный режим» .

Теперь доступна новая пробная версия Origin , которая работает с Chrome 119 (стабильная дата): 31 октября 2023 г. по Chrome 122 (стабильная дата): 31 октября 2023 г. для открытия всплывающих окон в полноэкранном режиме всего за один шаг. Нажмите Register на целевой странице Open popups as fullscreen windows origin trial, чтобы зарегистрироваться. Помимо пробной версии Origin, вы также можете протестировать локально, установив флаг chrome://flags/#fullscreen-popup-windows на Enabled .

Открытие полноэкранных всплывающих окон на текущем экране

Эта новая функция защищена разрешением window-management . После того, как пользователь предоставил разрешение, вы можете открыть всплывающее окно на весь экран, как в следующем примере.

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
  if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
    // Permission not granted. Call `window.getScreenDetails()` to prompt.
    await window.getScreenDetails();
  }
  // Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

В последней строке примера кода первый параметр — это url для открытия во всплывающем окне. Второй параметр — target со специальным значением _blank . Третий параметр — для windowFeatures , разделенной запятыми строки со значением popup для открытия всплывающего окна и новым значением fullscreen для открытия всплывающего окна в полноэкранном режиме. Это работает всего с одним жестом пользователя, поэтому может быть активировано одним нажатием на кнопку.

Открытие полноэкранных всплывающих окон на других экранах

Эта функция действительно сияет в сочетании с API управления окнами , который позволяет вам получать информацию обо всех экранах, которые пользователь подключил к своему компьютеру. Например, чтобы открыть всплывающее окно на весь экран на другом экране, чем текущий экран пользователя, вам нужно сначала найти другой экран , а затем передать его значения availLeft , availTop , availWidth и availHeight соответствующим значениям left , top , width и height строки windowFeatures .


document.querySelector('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
  const screenDetails = await window.getScreenDetails();
  ​​const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

Демо

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

Благодарности

Эту статью рецензировали Брэд Трибвассер , Хакан Исбилироглу , Майк Вассерман и Рэйчел Эндрю .