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:
- 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; - 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.
Powiązane artykuły
- Wyjaśnienie publiczne
- Wpis ChromeStatus
- Błąd Chromium
- Ocena tagu
- Pozycja w standardzie Mozilla
- Pozycja w standardzie WebKit
Podziękowania
Ten artykuł napisali Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman i Rachel Andrew.