Nieuwe origin-proefversie voor pop-upvensters op volledig scherm

Thomas Steiner

Stel je voor dat je een pop-upvenster op volledig scherm wilt openen. Tot nu toe bestond het openen van een pop-upvenster op volledig scherm uit twee stappen:

  1. Vanuit het hoofdvenster van de app roept u de methode window.open() aan waarvoor een gebruikersgebaar nodig is, zoals klikken op een knop voor het openen van een pop-upvenster .
  2. Vanuit het pop-upvenster roept u de methode Element.requestFullscreen() aan, waarvoor eveneens een gebruikersgebaar vereist is, zoals het klikken op een knop voor de modus Volledig scherm .

Er is nu een nieuwe origin-proefversie beschikbaar van Chrome 119 (stabiele datum): 31 oktober 2023 tot Chrome 122 (stabiele datum): 31 oktober 2023, voor het openen van pop-upvensters in de modus Volledig scherm met slechts één stap. Klik op Registreren op de pop-ups openen als Windows Origin-proefversie op volledig scherm om u aan te melden. Naast de origin-proefversie kunt u ook lokaal testen door de chrome://flags/#fullscreen-popup-windows vlag in te stellen op Enabled .

Pop-upvensters op volledig scherm openen op het huidige scherm

Deze nieuwe functie zit achter de toestemming window-management . Zodra de gebruiker de toestemming heeft verleend, kunt u een pop-upvenster op volledig scherm openen, zoals in het volgende voorbeeld.

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

In de laatste regel van het codevoorbeeld is de eerste parameter de url die in het pop-upvenster moet worden geopend. De tweede parameter is target , met de speciale waarde _blank . De derde parameter is voor de windowFeatures , een door komma's gescheiden tekenreeks met de waarde popup voor het openen van een pop-upvenster en de nieuwe waarde fullscreen voor het openen van het pop-upvenster in de modus Volledig scherm. Dit werkt met slechts één gebruikersgebaar en kan daarom met één klik op een knop worden geactiveerd.

Pop-upvensters op volledig scherm openen op andere schermen

Deze functie komt echt tot zijn recht in combinatie met de Window Management API waarmee u informatie kunt verkrijgen over alle schermen die de gebruiker op zijn computer heeft aangesloten. Als u bijvoorbeeld een pop-upvenster op volledig scherm wilt openen op een ander scherm dan het huidige scherm van de gebruiker, moet u eerst het andere scherm zoeken en vervolgens de waarden availLeft , availTop , availWidth en availHeight doorgeven aan de overeenkomstige waarden left , top , width en height waarden van de tekenreeks 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`);
});

Demo

Probeer pop-upvensters op volledig scherm in de demo en bekijk de broncode . Zorg ervoor dat u het selectievakje Volledig scherm en de pop-upknop Volledig scherm aanvinkt en, als u de mogelijkheid heeft, met de demo speelt terwijl meerdere schermen op uw apparaat zijn aangesloten.

Dankbetuigingen

Dit artikel is beoordeeld door Brad Triebwasser , Hakan Isbiliroglu , Mike Wasserman en Rachel Andrew .