Vandaag op het werk kwam ik de behoefte aan een volledig scherm weergave van een webpagina tegen, dus ik keek bij Baidu en vond een jQuery-plugin voor het volledig weergeven van webpagina's: jquery FullScreen Plugin. Het maakt het mogelijk om webpagina's volledig scherm te tonen voor verschillende browsers, waaronder FF 10, Chrome en Safari, en wordt gebruikt om gebruikers een leesbaardere versie van de webpagina te bieden die kan worden opgeschaald <canvas>en <video>geelementeerd.
jQuery Fullscreen Plugin
Beschrijving
Deze jQuery-plugin biedt een eenvoudig te gebruiken mechanisme om de nieuwe fullscreen-modus van moderne browsers te bedienen. Momenteel bieden alleen nieuwere Webkit-gebaseerde browsers (zoals Chrome en Safari), Firefox en IE11+ deze nieuwe fullscreen-functie.
Gebruik
Volledig schermmodus inschakelen
Je kunt de hele pagina of één HTML-element naar fullscreen-modus zetten:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
Dit werkt alleen wanneer de code is geactiveerd door een gebruikersinteractie (bijvoorbeeld een onclick-event op een knop). Browsers staan geen volledige schermmodus toe zonder gebruikersinteractie.
Fullscreen-modus verlaten
Fullscreen-modus wordt altijd via het document afgesloten, maar deze plugin maakt het ook mogelijk via elk HTML-element. Het eigenaardocument van het geselecteerde HTML-element wordt dan gebruikt:
$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
Volledige schermmodus opvragen
Geef simpelweg geen argument door aan de fullScreen-methode om de huidige status te bevragen. De methode geeft het huidige fullscreen-element (of true als de browser dit niet ondersteunt) terug wanneer fullscreen-modus actief is, false als niet actief of null wanneer de browser geen fullscreen ondersteunt Helemaal geen modus. Je kunt deze methode dus ook gebruiken om een fullscreen-knop alleen te tonen wanneer de browser fullscreen-modus ondersteunt:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Volledig scherm modus aanzetten
De plugin biedt een andere methode voor eenvoudig schakelen in fullscreen-modus:
$(document).toggleFullScreen();
Meldingen
De plugin activeert een fullscreenchange-event in het document wanneer de fullscreen-modus is gewijzigd. Als de browser een volledige schermstatuswijziging heeft afgewezen, veroorzaakt de plugin een fullscreenerror-gebeurtenis in het document. Voorbeeld:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen" + ($(document).fullScreen() ? " aan": "uit"));
});
$(document).bind("fullscreenerror", function() {
alert("Browser weigert volledige schermwijziging");
});
Fullscreen iframe
Het inschakelen van fullscreen-modus vanuit een iframe is standaard niet toegestaan, maar kan met een paar attributen op het iframe worden ingeschakeld:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Bekende problemen
In IE 11 wordt een lege pagina weergegeven wanneer je volledig scherm binnengaat vanuit een iframe. Geen idee waarom. Alle hulp is welkom.
In Safari (althans in Safari 7) is toetsenbordinvoer niet toegestaan in fullscreen-modus.
GitHub-adres: https://github.com/kayahr/jquery-fullscreen-plugin
Toeristen, als jullie de verborgen inhoud van dit bericht willen zien, alsjeblieft Antwoord
| 
Geplaatst op 14-08-2017 16:34:52
|
|
|
Geplaatst op 14-08-2017 17:08:18
|
Geplaatst op 25-11-2017 14:35:17
|
