Heute bei der Arbeit stieß ich auf den Bedarf für eine Vollbildanzeige einer Webseite, also habe ich bei Baidu nachgesehen und ein jQuery-Plugin für die Vollbildanzeige von Webseiten gefunden: jquery FullScreen Plugin. Sie ermöglicht die Vollbilddarstellung von Webseiten für verschiedene Browser, darunter FF 10, Chrome und Safari, und dient dazu, den Nutzern eine lesbarere Version der Webseite zu bieten, die skaliert <canvas>und <video>moduliert werden kann.
jQuery Vollbild-Plugin
Beschreibung
Dieses jQuery-Plugin bietet einen einfach zu bedienenden Mechanismus zur Steuerung des neuen Vollbildmodus moderner Browser. Derzeit bieten nur neuere Webkit-basierte Browser (wie Chrome und Safari), Firefox und IE11+, diese neue Vollbildfunktion.
Verwendung
Eintritt in den Vollbildmodus
Sie können entweder die ganze Seite oder ein einzelnes HTML-Element in den Vollbildmodus stellen:
$(dokument).fullScreen(true);
$("#myVideo").fullScreen(true);
Das funktioniert nur, wenn der Code durch eine Benutzerinteraktion ausgelöst wurde (zum Beispiel ein Onclick-Event auf einem Button). Browser erlauben kein Vollbildmodus ohne Benutzerinteraktion.
Vollbildmodus verlassen
Der Vollbildmodus wird immer über das Dokument beendet, aber dieses Plugin erlaubt ihn auch über jedes HTML-Element. Das Besitzer-Dokument des ausgewählten HTML-Elements wird dann verwendet:
$(dokument).fullScreen(false);
$("#myVideo").fullScreen(false);
Abfrage im Vollbildmodus
Geben Sie einfach kein Argument an die FullScreen-Methode weiter, um den aktuellen Zustand abzufragen. Die Methode gibt das aktuelle Vollbild-Element zurück (oder true, falls der Browser dies nicht unterstützt), wenn der Vollbildmodus aktiv ist, false falls nicht aktiv oder null, wenn der Browser keinen Vollbildmodus unterstützt Modus überhaupt nicht. Sie können diese Methode also auch nutzen, um einen Vollbild-Button nur anzuzeigen, wenn der Browser den Vollbildmodus unterstützt:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Vollbildmodus an- und herschalten
Das Plugin bietet eine weitere Methode zum einfachen Umschalten des Vollbildmodus:
$(dokument).toggleFullScreen();
Benachrichtigungen
Das Plugin löst ein Fullscreenchange-Ereignis im Dokument aus, wenn der Vollbildmodus geändert wurde. Wenn der Browser eine Vollbild-Zustandsänderung ablehnt, löst das Plugin ein Vollbildfehler-Ereignis im Dokument aus. Beispiel:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen" + ($(document).fullScreen() ? " an": "aus"));
});
$(document).bind("fullscreenerror", function() {
alert("Browser hat Vollbildänderung abgelehnt");
});
Vollbild-iframe
Das Aktivieren des Vollbildmodus innerhalb eines iFrames ist standardmäßig nicht erlaubt, kann aber mit einigen Attributen auf dem iframe aktiviert werden:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Bekannte Probleme
In IE 11 wird eine leere Seite angezeigt, wenn man aus einem iframe in den Vollbildmodus geht. Keine Ahnung warum. Jede Hilfe ist willkommen.
In Safari (zumindest in Safari 7) ist im Vollbildmodus keine Tastatureingabe erlaubt.
GitHub-Adresse: https://github.com/kayahr/jquery-fullscreen-plugin
Touristen, wenn ihr den versteckten Inhalt dieses Beitrags sehen wollt, bitte Antwort
| 
Veröffentlicht am 14.08.2017 16:34:52
|
|
|
Veröffentlicht am 14.08.2017 17:08:18
|
Veröffentlicht am 25.11.2017 14:35:17
|
