html+js实现F11全屏效果

it2022-05-08  7

本来想实现进入页面就是全屏的效果,但是并没有实现,onload也不行,有大佬解决的话麻烦告知一下,以下代码实测IE11,chemo,火狐都可以实现全屏。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input id="Button1" type="button" value="开始全屏" onclick="kaishi()" /> <input id="Button2" type="button" value="关闭全屏" onclick="guanbi()" /> <script> function kaishi() { var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11 else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } } function guanbi() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } document.addEventListener("fullscreenchange", function() { fullscreenState.innerHTML = (document.fullscreen) ? "" : "not "; }, false); document.addEventListener("mozfullscreenchange", function() { fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not "; }, false); document.addEventListener("webkitfullscreenchange", function() { fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not "; }, false); document.addEventListener("msfullscreenchange", function() { fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not "; }, false); </script> </body> </html>

最新回复(0)