På jobbet idag stötte jag på ett behov av helskärmsvisning av en webbsida, så jag kollade Baidu och hittade ett jQuery-plugin för helskärmsvisning av webbsidor: jquery FullScreen Plugin. Den möjliggör helskärmsvisning av webbsidor för olika webbläsare, inklusive FF 10, Chrome och Safari, och används för att ge användare en mer läsbar version av webbsidan som kan skalas <canvas>och <video>elementeras.
jQuery fullskärmsplugin
Beskrivning
Detta jQuery-plugin erbjuder en enkel mekanism för att styra det nya helskärmsläget i moderna webbläsare. För närvarande är det endast nyare webbläsare baserade på Webkit (som Chrome och Safari), Firefox och IE11+ som erbjuder denna nya helskärmsfunktion.
Användning
Går in i helskärmsläge
Du kan antingen byta hela sidan eller ett enda HTML-element till helskärmsläge:
$(dokument).fullScreen(true);
$("#myVideo").fullScreen (true);
Detta fungerar bara när koden triggats av en användarinteraktion (till exempel en onclick-händelse på en knapp). Webbläsare tillåter inte att man går in i helskärmsläge utan användarinteraktion.
Lämnar helskärmsläge
Fullskärmsläge avslutas alltid via dokumentet, men detta tillägg tillåter det även via vilket HTML-element som helst. Ägardokumentet för det valda HTML-elementet används då:
$(dokument).fullScreen(false);
$("#myVideo").fullScreen(false);
Förfrågan i helskärmsläge
Skicka helt enkelt inget argument till fullScreen-metoden för att fråga om det aktuella tillståndet. Metoden returnerar det aktuella helskärmselementet (eller true om webbläsaren inte stödjer detta) när fullskärmsläget är aktivt, false om inte aktivt eller null när webbläsaren inte stödjer helskärm Mode överhuvudtaget. Så du kan använda denna metod även för att visa en helskärmsknapp endast när webbläsaren stödjer helskärmsläge:
$("#fullscreenButton").toggle($(dokument).fullScreen() != null))
Växlar helskärmsläge
Pluginet erbjuder en annan metod för enkel växling av helskärmsläge:
$(dokument).toggleFullScreen();
Notiser
Pluginet utlöser en fullskärmsförändringshändelse i dokumentet när helskärmsläget har ändrats. Om webbläsaren avvisade en helskärmsstatusändring utlöser pluginet en fullskärmsfelhändelse i dokumentet. Exempel:
$(document).bind("fullscreenchange", function() {
console.log("Fullskärm" + ($(dokument).fullScreen() ?" på": "av"));
});
$(document).bind("fullscreenerror", function() {
alert("Webbläsare avvisade helskärmsändring");
});
Fullscreen iframe
Att gå in i helskärmsläge från en iframe är inte tillåtet som standard, men det kan aktiveras med några attribut på iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Kända problem
I IE 11 visas en tom sida när man går in i helskärm från en iframe. Ingen aning varför. All hjälp är välkommen.
I Safari (åtminstone i Safari 7) är ingen tangentbordsinmatning tillåten i helskärmsläge.
GitHub-adress: https://github.com/kayahr/jquery-fullscreen-plugin
Turister, om ni vill se det dolda innehållet i detta inlägg, snälla Svar
| 
Publicerad på 2017-08-14 16:34:52
|
|
|
Publicerad på 2017-08-14 17:08:18
|
Publicerad på 2017-11-25 14:35:17
|
