Novo teste de origem para janelas pop-up de tela cheia

Thomas Steiner

Imagine que você queira abrir uma janela pop-up no modo de tela cheia. Até agora, abrir uma janela pop-up em tela cheia consistia em duas etapas:

  1. Na janela principal do app, chame o método window.open(), que exige um gesto do usuário, como clicar em um botão Abrir janela pop-up.
  2. Na janela pop-up, chame o método Element.requestFullscreen(), que da mesma forma exige um gesto do usuário, como um clique em um botão Entrar no modo de tela cheia.

Há agora um novo teste de origem disponível no Chrome 119 (data estável): De 31 de outubro de 2023 ao Chrome 122 (data estável): 31 de outubro de 2023 para abrir janelas pop-up no modo de tela cheia com apenas uma etapa. Clique em Registrar na página Abrir pop-ups como janelas em tela cheia para se inscrever. Além do teste de origem, também é possível testar localmente configurando a sinalização chrome://flags/#fullscreen-popup-windows como Ativada.

Abrindo janelas pop-up em tela cheia na tela atual

Esse novo recurso é protegido pela permissão window-management. Depois que o usuário conceder a permissão, você poderá abrir uma janela pop-up em tela cheia, como no exemplo abaixo.

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');
});

Na última linha do exemplo de código, o primeiro parâmetro é o url a ser aberto na janela pop-up. O segundo parâmetro é o target, com o valor especial de _blank. O terceiro parâmetro é para a windowFeatures, uma string separada por vírgulas com o valor popup para abrir uma janela pop-up e o novo valor fullscreen para abrir a janela pop-up no modo de tela cheia. Esse recurso funciona com apenas um gesto do usuário e, portanto, pode ser ativado com um único clique em um botão.

Abrindo janelas pop-up em tela cheia em outras telas

Esse recurso se destaca muito junto com a API Window Management, que permite acessar informações sobre todas as telas que o usuário conectou ao computador. Por exemplo, para abrir uma janela pop-up em tela cheia em outra tela que não seja a atual do usuário, primeiro é necessário encontrar a outra tela e, em seguida, transmitir os valores availLeft, availTop, availWidth e availHeight para os valores correspondentes left, top, width e height da string 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`);
});

Demonstração

Teste as janelas pop-up em tela cheia na demonstração e confira o código-fonte. Marque a caixa de seleção tela cheia e o botão Pop-up de tela cheia e, se possível, teste a demonstração com várias telas conectadas ao dispositivo.

Agradecimentos

Este artigo foi revisado por Brad TriebWasser, Hakan Isbiliroglu, Mike Wasserman e Rachel Andrew.