W pakiecie z HTML5 pojawiła się duża liczba zalet API, a jednym z najlepszych był interfejs API pełnoekranowego, który zapewnia natywny sposób, w jaki przeglądarka robi to, co było możliwe tylko w pamięci flash przez długi czas: wyświetla stronę w trybie pełnoekranowym dla użytkownika.
Jest to przydatne, jeśli wyświetlasz wideo lub obrazy lub gdy tworzysz grę. W rzeczywistości każda treść, na którą należy się skoncentrować, może korzystać z interfejsu API pełnoekranowego.
A co najważniejsze, interfejs API pełnego ekranu jest naprawdę łatwy w użyciu ...
Wiele metod jest częścią interfejsu API pełnoekranowego:
element.requestFullScreen()Ta metoda umożliwia przejście jednego elementu do trybu pełnoekranowego.
Document.getElementById(“myCanvas”).requestFullScreen()Spowoduje to, że płótno z identyfikatorem "myCanvas" przejdzie w tryb pełnoekranowy.
document.cancelFullScreen()Spowoduje to wyjście z trybu pełnoekranowego i powrót do widoku dokumentu.
Document.fullScreenZwróci true, jeśli użytkownik jest w trybie pełnoekranowym.
document.fullScreenElementZwraca element, który jest aktualnie w trybie pełnoekranowym.
Zauważ, że są to standardowe metody, ale na razie będziesz potrzebować prefiksów dostawcy, aby działało to w Chrome, Firefox i Safari (Internet Explorer i Opera nie obsługują obecnie tego API).
Od samego początku musimy dowiedzieć się, którą metodę rozpoznaje przeglądarka, utworzymy funkcję, która znajdzie odpowiednią metodę dla przeglądarki i wywoła:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Jak widać, cała ta funkcja sprawdza, czy któraś z metod requestFullScreen zwraca wartość true, a następnie wywołuje funkcję dla poprawnej przeglądarki, używając prefiksu dostawcy.
Po tym wszystkim, co musimy zrobić, to wywołać funkcję fullScreen:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Spowoduje to wysłanie prośby do użytkownika z prośbą o zezwolenie na przejście do trybu pełnoekranowego, jeśli zostanie zaakceptowany, wszystkie paski narzędzi w przeglądarce znikną, a jedyną rzeczą na ekranie będzie żądana strona internetowa lub pojedynczy element.
Ta metoda wymaga również prefiksów dostawcy, więc użyjemy tego samego pomysłu co powyżej i utworzymy funkcję, która określi, który prefiks powinniśmy używać zgodnie z przeglądarką użytkownika.
Jedną z rzeczy, którą zauważysz, jest to, że ta metoda nie wymaga żadnych przekazanych elementów, ponieważ w przeciwieństwie do metody requestFullScreen zawsze ma zastosowanie do całego dokumentu.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();W połączeniu z tym API JavaScript pojawiła się pseudoklasa CSS o nazwie: full-screen i można jej użyć do stylizowania dowolnych elementów na stronie internetowej, gdy jest w trybie pełnoekranowym, może się to przydać, ponieważ rozmiar przeglądarki zwiększa się nieco, gdy pełny ekran.
/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}Pamiętaj, że nie możesz oddzielić prefiksów dostawcy przecinkami, ponieważ przeglądarka ich nie odczyta:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Aby style były prawidłowo stosowane, musisz umieścić prefiks każdego dostawcy w swoim własnym bloku.
Ten JavaScript API jest jednym z najmniej znanych programów dostarczanych z HTML5, ale moim zdaniem jest zarówno skuteczny, jak i prosty w implementacji. Ulepszone wrażenia użytkownika skupiające się na jednym elemencie, szczególnie w przypadku wideo, obrazów i gier, są warte kilku linii kodu.
Czy wdrożyłeś interfejs API pełnego ekranu w dowolnym miejscu? Z jakich zastosowań możesz o tym pomyśleć? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz ostrości przez Shutterstock.