Nieuwe origin-proefversie voor pop-upvensters op volledig scherm

Thomas Steiner

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

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

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

Pop-upvensters in volledig scherm openen op het huidige scherm

Deze nieuwe functie is beveiligd met een window-management . Zodra de gebruiker deze machtiging 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 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 volledig schermmodus. Dit werkt met slechts één gebruikersbeweging 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. Om bijvoorbeeld een pop-upvenster op volledig scherm te openen op een ander scherm dan het huidige scherm van de gebruiker, moet u eerst het andere scherm vinden en vervolgens de waarden ervan voor availLeft , availTop , availWidth en availHeight doorgeven aan de corresponderende waarden left , top , width en height 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`);
});

Demonstratie

Probeer de pop-upvensters in volledig scherm in de demo en bekijk de broncode . Zorg ervoor dat u het selectievakje 'Volledig scherm' en de knop 'Volledig scherm' aanvinkt. Speel, indien mogelijk, de demo met meerdere schermen op uw apparaat.

Dankbetuigingen

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