Error al ejecutar ‘requestFullScreen’ en ‘Elemento’: la API solo puede iniciarse con un gesto del usuario [duplicate]

2 minutos de lectura

Quiero hacer que mi juego HTML5 pase a pantalla completa nativa en el lanzamiento. Cuando hago esto con un botón al hacer clic, pasa a pantalla completa. Pero cuando uso window.onload para que se cargue en pantalla completa, responde en la consola Error al ejecutar ‘requestFullScreen’ en ‘Elemento’: la API solo puede iniciarse con un gesto del usuario. Estoy usando cromo. ¿Hay una solución a esto?

Mi código:

    <!DOCTYPE html>
    <html>
    <head>
<script>
window.onload = openfullscreen();

function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}

function openfullscreen() {

launchIntoFullscreen(document.documentElement);
}

function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
window.close();
}

function fix() {
var screenwidth = screen.width;
var screenhei = screen.height;
document.getElementById('ifam').width = screenwidth;
document.getElementById('ifam').height = screenhei;
}
</script>
<style>
  #ifam {
    position:fixed;
    left:0%;
    top:0%;
    z-index:-1;
  }
  #fullscreen {
    position:fixed;
    left:0%;
    top:0%;
    z-index:1;
  }
  </style>
  </head>
  <body onload="fix()">
  <div id="fullscreen">
  <button onclick="openfullscreen()">Open</button>
  <button onclick="exitFullscreen()">Exit</button>
  </div>
  <iframe id="ifam" src="https://stackoverflow.com/questions/32642865/lchosser.html"></iframe>
  </body>
  </html>

  • El problema fue User clicked, full screen was triggered using requestFullscreen. Pero cuando está en pantalla completa, el full screen was triggered again due to application refresh. Usando un state variable detectar already in full screen resuelve el problema, para esto necesitamos ver escuchar exitFullscreen también como en la pulsación de la tecla Escape, etc.

    – Manohar Reddy Poreddy

    10 de septiembre de 2022 a las 6:15


avatar de usuario de hunters30
cazadores30

Cualquier api de javascript se hace intencionalmente de esta manera, supongo. Imagínese si va a un sitio web y se enciende automáticamente en pantalla completa sin que usted haga nada en absoluto. Estaría expuesto a todo un mundo de ventanas emergentes molestas y otras cosas que ni siquiera tiene la intención de abrir. Entonces, cualquier script de este tipo requiere la interacción del usuario para funcionar. Cambiar a pantalla completa sin la interacción del usuario se siente como una intención maliciosa. Ejemplo si un sitio como este se abriera en pantalla completa: escritorio virtual alguien puede estar bastante confundido por lo que acaba de suceder en su escritorio.

Si aún desea probar una solución parcial, tal vez eche un vistazo a la siguiente respuesta:

WorkAround parcial

  • Eche un vistazo a otras respuestas también en el enlace provisto para comprender mejor.

    – cazadores30

    18 de septiembre de 2015 a las 2:50

¿Ha sido útil esta solución?