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:
- 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. - 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.
Links relacionados
- Explicações públicas
- Entrada ChromeStatus
- Bug do Chromium
- Análise da TAG
- Posição de padrões do Mozilla (em inglês)
- Posição padrão do WebKit
Agradecimentos
Este artigo foi revisado por Brad TriebWasser, Hakan Isbiliroglu, Mike Wasserman e Rachel Andrew.