Nowy okres próbny origin dla wyskakujących okienek na pełnym ekranie

Thomas Steiner

Załóżmy, że chcesz otworzyć wyskakujące okienko w trybie pełnoekranowym. Do tej pory otwarcie pełnoekranowego wyskakującego okienka składało się z 2 kroków:

  1. wywołanie metody window.open() z poziomu głównego okna aplikacji, która wymaga gestu użytkownika, takiego jak kliknięcie przycisku Otwórz wyskakujące okienko;
  2. Wywołanie metody Element.requestFullscreen() w wyskakującym okienku, co również wymaga gestu użytkownika, takiego jak kliknięcie przycisku Otwórz tryb pełnoekranowy.

Dostępna jest nowa wersja próbna origin dostępna od Chrome 119 (wersja stabilna): Od 31 października 2023 r. do Chrome 122 (data stabilna): 31 października 2023 r. otwieranie wyskakujących okienek w trybie pełnoekranowym wymaga tylko 1 kroku. Aby się zarejestrować, na stronie docelowej Otwórz wyskakujące okienka w oknach pełnoekranowych kliknij Zarejestruj się. Oprócz testowania origin możesz też przeprowadzać testy lokalnie, ustawiając flagę chrome://flags/#fullscreen-popup-windows na Enabled (Włączono).

Otwieranie pełnoekranowych wyskakujących okienek na bieżącym ekranie

Ta nowa funkcja jest ograniczona do uprawnień window-management. Gdy użytkownik przyzna uprawnienia, możesz otworzyć pełnoekranowe wyskakujące okienko, jak w przykładzie poniżej.

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

W ostatnim wierszu przykładowego kodu pierwszym parametrem jest parametr url, który otwiera się w wyskakującym okienku. Drugim parametrem jest target, a jego specjalna wartość to _blank. Trzeci parametr to windowFeatures, oddzielony przecinkami ciąg znaków z wartością popup, która otwiera wyskakujące okienko, i nową wartością fullscreen do otwierania wyskakującego okienka w trybie pełnoekranowym. Wymaga tylko jednego gestu użytkownika, więc można je aktywować jednym kliknięciem przycisku.

Otwieranie pełnoekranowych wyskakujących okienek na innych ekranach

Ta funkcja szczególnie wyróżnia się w połączeniu z interfejsem Window Management API, który pozwala uzyskać informacje o wszystkich ekranach, które użytkownik połączył ze swoim komputerem. Aby na przykład otworzyć wyskakujące okienko na innym ekranie niż bieżący ekran użytkownika, musisz najpierw znaleźć drugi ekran, a potem przekazać jego wartości availLeft, availTop, availWidth i availHeight odpowiednim wartościom left, top, width i height w ciągu znaków 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`);
});

Pokaz

Wypróbuj pełnoekranowe wyskakujące okienka w wersji demonstracyjnej i wyświetl kod źródłowy. Zaznacz pole wyboru pełnoekranowy i przycisk Wyskakujące okienko pełnego ekranu. Jeśli możesz, pobaw się demonstracją z wieloma ekranami podłączonymi do urządzenia.

Podziękowania

Ten artykuł napisali Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman i Rachel Andrew.