richiamare la funzione requestfullscreen al caricamento della pagina

**Murric** · 16-11-2014, 22:10

Salve a tutti, vi ringrazio anticipatamente per la disponibilità.
Premetto di non essere esperto.

Sto simulando un'interfaccia touch screen che altro non è che una pagina html.
A parte tutti gli elementi della pagina sto avendo dei problemi con la funzione requestFullscreen (causa quasi nessuna conoscenza di javascript).

Ho trovato un esempio che funziona molto bene-->

nell' Head della pagina:

<script>
function enterFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
//Mozilla
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
//WebKit
element.webkitRequestFullScreen();
}
}

</script>

nel body della pagina:

<input type="button" value="Enter Fullscreen (Page)" onclick="enterFullScreen(document.documentElement) "/><br/>
<input type="button" value="Exit Fullscreen" onclick="exitFullScreen()" />

Vorrei che la funzione in questione venisse chiamata automaticamente quando carico la pagina e non avere il bottone perchè ogni volta che poi passo da una pagina all'altra devo includere nella nuova pagina lo stesso bottone e tornare a fullscreen.
Uso Chrome e ho notato che il metodo che funziona è webkitRequestFullScreen().

Qualcuno mi potrebbe dire come si fa?
Grazie mille!!!!!

**cavicchiandrea** · 16-11-2014, 22:37

Ciao e benvenuto
Questo funziona anche su chrome per lanciarlo al caricamento usa window.onload=function(){ qui metti il codice fullscreen}

**Murric** · 16-11-2014, 22:55

Ciao Andrea grazie della risposta....

Scusa ma sono un pò ottuso allora,

nell'head della pagina devo mettere:

<script>
window.onload=function(){...}
</script>

e all'interno delle grafe questo codice?

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();
}
}
}

**cavicchiandrea** · 16-11-2014, 23:18

codice:

window.onload=function(){
if (!document.fullscreenElement &&
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { 
    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();
    }
  }
}

da inserire nella head <head> codice </head>

**Murric** · 16-11-2014, 23:42

Non va.....forse sbaglio qualcosa...questa è la mia pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Sfondo a tutta pagina con i CSS - Esempio 3</title>



<script>

window.onload=function(){
if (!document.fullscreenElement &&
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
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(E lement.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();
}
}
}

</script>

</head>

<body>

<img src="bck.jpg" class="bg" />
<div id="content">

<div id="nomi">
<img src="img/nomi.png"/>
<div id="nomeAuditore">

<a href="interfacciaPag3.html"></a>

</div>


</div>
</body>

</html>

E il fatto che se controllo nella consolle di Chrome non mi da neanche errori...
Qualche suggerimento?
Grazie!

**cavicchiandrea** · 17-11-2014, 00:17

Dopo diversi tentativi sono arrivato alla conclusione che non è possibile aprire un fullscreen in automatico richiede un click da parte del visitatore http://webandylab.altervista.org/fullscreen.php

Discussione: richiamare la funzione requestfullscreen al caricamento della pagina

Strumenti discussione

Ricerca discussione

Visualizza

richiamare la funzione requestfullscreen al caricamento della pagina

Tag per questa discussione

Permessi di invio