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

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

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

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

Теперь доступна новая пробная версия Origin , начиная с Chrome 119 (дата стабильной версии): 31 октября 2023 г. и заканчивая Chrome 122 (дата стабильной версии): 31 октября 2023 г., позволяющая открывать всплывающие окна в полноэкранном режиме всего за один шаг. Нажмите «Зарегистрироваться» на целевой странице «Открывать всплывающие окна в полноэкранном режиме Windows Origin», чтобы зарегистрироваться. Помимо пробной версии 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`);
});

Демо

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

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

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