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 otwieranie wyskakującego okienka na pełnym ekranie wymagało wykonania 2 czynności:

  1. Wywołanie metody window.open() w głównym oknie aplikacji, która wymaga działania użytkownika, np. kliknięcia przycisku Otwórz okno wyskakujące.
  2. W oknie wyskakującym wywołanie metody Element.requestFullscreen(), która również wymaga działania użytkownika, np. kliknięcia przycisku Enter, aby przejść do trybu pełnoekranowego.

Od wersji Chrome 119 (data stabilnej wersji: 2020-10-01) do Chrome 122 (data stabilnej wersji: 2023-10-31) możesz korzystać z nowego testu pochodzenia. Od 2023-10-31 możesz w Chrome otworzyć okna wyskakujące w trybie pełnoekranowym jednym krokiem. Aby się zarejestrować, na stronie docelowej wersji próbnej origin kliknij Zarejestruj. Oprócz testowania pochodzenia możesz też testować lokalnie, ustawiając flagę chrome://flags/#fullscreen-popup-windows na Włączone.

otwierać okna wyskakujące na pełnym ekranie na bieżącym ekranie.

Ta nowa funkcja wymaga uprawnienia window-management. Gdy użytkownik przyzna uprawnienia, możesz otworzyć wyskakujące okienko na pełnym ekranie, jak w tym przykładzie.

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 powoduje otwarcie okna. Drugi parametr to target, z wartością specjalną _blank. Trzeci parametr to windowFeatures, ciąg znaków rozdzielonych przecinkami o wartości popup do otwierania okna wyskakującego i nowej wartości fullscreen do otwierania okna wyskakującego w trybie pełnoekranowym. Wystarczy jedno działanie użytkownika, aby aktywować tę funkcję, dlatego można ją włączyć jednym kliknięciem przycisku.

otwierać pełnoekranowe okna wyskakujące na innych ekranach.

Ta funkcja sprawdza się szczególnie w połączeniu z interfejsem Window Management API, który umożliwia uzyskanie informacji o wszystkich ekranach połączonych z komputerami użytkownika. Aby na przykład otworzyć pełnoekranowe okno wyskakujące na innym ekranie niż aktualny ekran użytkownika, musisz najpierw znaleźć ten inny ekran, a potem przekazać jego wartości availLeft, availTop, availWidth i availHeight do odpowiednich wartości left, top, width i height 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`);
});

Prezentacja

Wypróbuj wyskakujące okna pełnoekranowe w demo i wyświetl kod źródłowy. Pamiętaj, aby zaznaczyć pole wyboru Pełny ekran i przycisk Pełny ekran (wyskakujące okienko). Jeśli to możliwe, odtwórz wersję demonstracyjną z kilkoma ekranami podłączonymi do urządzenia.

Podziękowania

Ten artykuł został sprawdzony przez Brada Triebwassera, Hakana Isbiliroglu, Mike’a Wassermana i Rachel Andrew.