En el siguiente fragmento, cuando se presiona el botón "Hacer una pantalla completa", el iFrame ingresa al modo de pantalla completa. Estoy buscando una solución para salir del modo de pantalla completa presionando "ESC" o presionando "Hacer botón de pantalla completa" nuevamente.
<button onclick="makeFullscreen('game');">[Make a fullscreen]</button> function makeFullscreen(id){ var el = document.getElementById(id); el.style = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" }Totalmente trabajando
const fullscreenStyle = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:99999;" const normalStyle = "width:1000px;height:700px;border:0;" function enterFullScreen(el) { el.style = fullscreenStyle; document.querySelector('.button1').style = 'position:absolute;top:0;right:0;z-index:999999;'; } function exitFullScreen(el) { el.style = normalStyle; document.querySelector('.button1').style = 'position:absolute;top:auto;right:auto;'; } function toggleFullScreen() { var el = document.getElementById("game"); if (el.style.position === "fixed") { exitFullScreen(el); } else { enterFullScreen(el); } } document.addEventListener("keydown", function(e) { if (e.key === "Escape") { var el = document.getElementById("game"); exitFullScreen(el); } }, false);Dado que laAPI de pantalla completa está fuera, otra solución puede ser que, en lugar de vincular la lógica Make a Fullscreen completa al botón, vincule la lógica para alternar la pantalla completa. Para eso :
enterFullscreen en pantalla completa y exitFullScreen de pantalla completatoggleFullScreen que verifique el modo y haga lo siguiente:exitFullscreenenterFullScreenPara implementar la salida al presionar ESC
keydownkey en el evento.key coincide con Escape , llame a exitFullScreenLa siguiente solución hace lo mismo.
<!DOCTYPE html> <html lang="en"> <body> <iframe id="game" style="width:1000px;height:700px;border:0;" allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="https://randomurl.com/"> </iframe> <button onclick="toggleFullScreen('game');"> [Toggle fullscreen] </button> </body> <script type="text/javascript"> const fullscreenStyle = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" const normalStyle = "width:1000px;height:700px;border:0;" function enterFullScreen(el) { el.style = fullscreenStyle; } function exitFullScreen(el) { el.style = normalStyle; } function toggleFullScreen() { var el = document.getElementById("game"); if (el.style.position === "fixed") { exitFullScreen(el); } else { enterFullScreen(el); } } document.addEventListener("keydown", function(e) { if (e.key === "Escape") { var el = document.getElementById("game"); exitFullScreen(el); } }, false); </script> </html>