Come posso accedere alla modalità a schermo intero utilizzando solo il codice Javascript/JQuery? L'obiettivo è entrare in modalità a schermo intero come quando si preme F11 nel browser, ma poi a livello di programmazione.Modalità schermo intero per il mio browser utilizzando jquery
È possibile utilizzare i plugin jQuery liberamente disponibili per questo scopo, controllare these- jquery full screen, Jquery full screen, jquery full screen
Ecco una demo funzionante per rendere il browser a schermo intero
Puoi attiva la modalità a schermo intero usando vanilla JavaScript senza jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Test</title>
</head>
<body id="body">
<h1>test</h1>
<script>
var elem = document.getElementById("body");
elem.onclick = function() {
req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
req.call(elem);
}
</script>
</body>
</html>
Una cosa che è importante da notare, è possibile richiedere solo la modalità a schermo intero quando un utente esegue un'azione (ad esempio un clic). Non è possibile richiedere la modalità a schermo intero senza un'azione dell'utente [1] (ad esempio caricamento a pagina).
Ecco una funzione cross browser per attivare la modalità a schermo intero (as obtained from the MDN):
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
Per maggiori informazioni, consultate il MDN page on full screen APIs.
C'è qualche ragione per non usare una breve istruzione come' req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen; 'per ottenere la funzione supportata, ma usare' else if' invece? –
@MaxYari Almeno Chrome genera un'eccezione di "invocazione illegale" quando memorizza 'document.documentElement.webkitRequestFullscreen' in una variabile' x' e quindi usa 'x()' o 'x.call()'. – randombumper
@randombumper ok thx per chiarimenti –
La nuova tecnologia HTML5 - API a schermo intero ci offre un modo semplice per presentare un contenuto della pagina web in modalità a schermo intero. Stiamo per fornirti informazioni dettagliate sulla modalità a schermo intero. Prova a immaginare tutti i possibili vantaggi che puoi ottenere utilizzando questa tecnologia: album fotografici, video e persino giochi a schermo intero.
Ma prima di descrivere questa nuova tecnologia, devo notare che questa tecnologia è sperimentale, e supportata da tutti i principali browser. Demohttp://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Qui sta lavorando::
Potete trovare il tutorial completo quihttp://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
Nel caso in cui dispongono di un pulsante o qualsiasi altra cosa, possiamo usare questo script:
<script language="JavaScript">
function fullScreen() {
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullScreen
;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
// End -->
Con un pulsante. Tutto è facile da <a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a>
Ma come posso caricare quello script sul pageload. Ciò significa che Webform sarà a schermo intero sul pageload senza alcun clic su nulla.
Se è necessario un plug-in che supporti le versioni di IE precedenti a IE11 (IE8-10), dare un'occhiata a jQuery.fullscreen. IE non supportava questa funzionalità in modo nativo fino a IE11.
Se avete bisogno di JQuery per ottenere la facilità di selezione di elementi, allora si può fare questo:
var viewer = $("#parentid .classname .childelement")[0];
var rFS = viewer.mozRequestFullScreen || viewer.webkitRequestFullscreen || viewer.requestFullscreen;
rFS.call(viewer);
Si prega di provare sottostante Codice
var el = document.documentElement,
rfs = el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
rfs.call(el);
C'è qualcosa di nuovo nella tua risposta o hai semplicemente copiato le cose dalle altre risposte? –
si può vedere qui http: // StackOverflow .com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen –