Necesito la función de activar y desactivar la pantalla completa y todo funciona muy bien cuando uso document.requestFullScreen y document.cancelFullScreen API. Pero cuando el usuario activa la pantalla completa usando F11, la API document.cancelFullScreen no funciona como yo quiero.
Traté de encontrar y probar muchas respuestas de stackoverflow, pero ninguna de ellas me ayudó. Quiero revertir/cancelar el efecto de pantalla completa de la pulsación de la tecla F11 realizada por el usuario.
Aquí está la demostración que creé donde puede ver el cuadro de arena del código de problema, en este cuadro de arena simplemente abra la salida en una nueva ventana / pestaña separada, luego presione F11 que activará la pantalla completa, ahora intente presionar 'Ir a pantalla completa' que proporcioné que no es capaz para salir del efecto de pantalla completa.
Probé este método, funciona bien, ya que en mi intento, agregué el código a continuación, también creé un nuevo archivo en su caja de arena de código llamado "test.html", y también aquí está el enlace de resultado. Espero que sea la solución a tu problema.
<!DOCTYPE html> <html> <head> <style> .full-container { background-color: yellow; } </style> </head> <body> <div id="full-container" class="full-container"> Open this page in New Window to see effect of button <button onclick="goFullscreen()">go FullScreen</button> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> var fullScreenMod = false; $(document).on("keydown", function (ev) { if (ev.keyCode === 27 || ev.keyCode === 122) { goFullscreen(); return false; } }); /* Standard syntax */ document.addEventListener("fullscreenchange", function () { fullScreenMod = !fullScreenMod; }); /* Firefox */ document.addEventListener("mozfullscreenchange", function () { fullScreenMod = !fullScreenMod; }); /* Chrome, Safari and Opera */ document.addEventListener("webkitfullscreenchange", function () { fullScreenMod = !fullScreenMod; }); /* IE / Edge */ document.addEventListener("msfullscreenchange", function () { fullScreenMod = !fullScreenMod; }); function goFullscreen() { console.log("fullscreen called"); let topContainer = document.getElementById("full-container"); let isWholeFullScreen = fullScreenMod; if (isWholeFullScreen == false) { isWholeFullScreen = !isWholeFullScreen; if (topContainer.requestFullScreen) { topContainer.requestFullScreen(); } else if (topContainer.mozRequestFullScreen) { topContainer.mozRequestFullScreen(); } else if (topContainer.webkitRequestFullScreen) { topContainer.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } else if (topContainer.msRequestFullscreen) { topContainer.msRequestFullscreen(); } } else { isWholeFullScreen = !isWholeFullScreen; if (document.exitFullScreen) { document.exitFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } } </script> </html>