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

Thomas Steiner

Imagine que você quer 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 no botão Abrir janela pop-up.
  2. Na janela pop-up, chame o método Element.requestFullscreen(), que também exige um gesto do usuário, como clicar em um botão Entrar no modo de tela cheia.

Agora há um novo teste de origem disponível no Chrome 119 (data estável): Clique em Registrar na página de destino do teste Abrir pop-ups como janelas em tela cheia para se inscrever. Além do teste de origem, também é possível testar localmente definindo a flag chrome://flags/#fullscreen-popup-windows como Ativada.

Abertura de janelas pop-up em tela cheia na tela atual

Esse novo recurso está bloqueado 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 para abrir na janela pop-up. O segundo parâmetro é o target, com o valor especial de _blank. O terceiro parâmetro é para o 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. Isso funciona com apenas um gesto do usuário, portanto, pode ser ativado com um único clique em um botão.

Abrir janelas pop-up em tela cheia em outras telas

Esse recurso realmente se destaca em combinação com a API Window Management, que permite coletar 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 transmitir os valores availLeft, availTop, availWidth e availHeight para os valores left, top, width e height correspondentes 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 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. Se possível, teste a demonstração com várias telas anexadas ao dispositivo.

Agradecimentos

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