Dziś w pracy napotkałem potrzebę pełnoekranowego wyświetlania strony internetowej, więc sprawdziłem Baidu i znalazłem wtyczkę jQuery do wyświetlania stron internetowych na pełnym ekranie: jquery FullScreen Plugin. Umożliwia pełnoekranowe wyświetlanie stron internetowych dla różnych przeglądarek, w tym FF 10, Chrome i Safari, i służy do zapewnienia użytkownikom bardziej czytelnej wersji strony, którą można skalować <canvas>i <video>dostosowywać.
wtyczka pełnoekranowa jQuery
Opis
Ta wtyczka jQuery zapewnia prosty w użyciu mechanizm sterowania nowym trybem pełnoekranowym nowoczesnych przeglądarek. Obecnie tylko nowsze przeglądarki oparte na Webkit (takie jak Chrome i Safari), Firefox i IE11+ oferują tę nową funkcję pełnoekranową.
Zastosowanie
Przechodzenie w tryb pełnoekranowy
Możesz przełączyć całą stronę lub pojedynczy element HTML na tryb pełnoekranowy:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
Działa to tylko wtedy, gdy kod został wywołany przez interakcję użytkownika (na przykład zdarzenie kliknięcia przycisku). Przeglądarki nie pozwalają na wejście w tryb pełnoekranowy bez interakcji z użytkownikiem.
Wyjście z trybu pełnoekranowego
Tryb pełnoekranowy jest zawsze wyjmowany przez dokument, ale ta wtyczka pozwala na to także za pomocą dowolnego elementu HTML. Wtedy używany jest dokument właścicielski wybranego elementu HTML:
$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
Zapytanie w trybie pełnoekranowym
Po prostu nie przekażaj żadnego argumentu metodzie fullScreen, aby zapytać o aktualny stan. Metoda zwraca aktualny element pełnoekranowy (lub true, jeśli przeglądarka tego nie obsługuje), gdy tryb pełnoekranowy jest aktywny, fałszywy jeśli nie jest aktywny, lub null, gdy przeglądarka nie obsługuje pełnoekranowego w ogóle. Możesz więc użyć tej metody do wyświetlania przycisku na pełnym ekranie tylko wtedy, gdy przeglądarka obsługuje tryb pełnoekranowy:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Przełączanie trybu pełnoekranowego
Wtyczka oferuje inną metodę prostego przełączania trybu pełnoekranowego:
$(document).toggleFullScreen();
Powiadomienia
Wtyczka wywołuje zdarzenie zmiany na całym ekranie w dokumencie, gdy tryb pełnoekranowy zostanie zmieniony. Jeśli przeglądarka odrzuciła zmianę stanu na pełnym ekranie, wtyczka wywołuje zdarzenie błędu na pełnym ekranie w dokumencie. Przykład:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen" + ($(document).fullScreen() ? " włączone": "wyłączone"));
});
$(document).bind("fullscreenerror", function() {
alert("Przeglądarka odrzuciła zmianę na pełnym ekranie");
});
Pełnoekranowy iframe
Wejście w tryb pełnoekranowy z wewnątrz iframe nie jest domyślnie dozwolone, ale można je włączyć za pomocą kilku atrybutów na iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Znane problemy
W IE 11 po wejściu na pełny ekran z ramki i-frame wyświetlana jest pusta strona. Nie mam pojęcia dlaczego. Każda pomoc mile widziana.
W Safari (przynajmniej w Safari 7) w trybie pełnoekranowym nie można wprowadzić klawiatury.
Adres GitHub: https://github.com/kayahr/jquery-fullscreen-plugin
Turyści, jeśli chcecie zobaczyć ukrytą zawartość tego wpisu, proszę Odpowiedź
| 
Opublikowano 14.08.2017 16:34:52
|
|
|
Opublikowano 14.08.2017 17:08:18
|
Opublikowano 25.11.2017 14:35:17
|
