HTML中的全屏设置
案例是通过一张图片展示,通过两个按钮来确定是否全屏显示,一个按钮来确定是否处于全屏状态,对主流浏览器都支持。
代码实例如下:
通过判断使用的浏览器进行选择选用什么浏览器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <img src="../image/1.jpg"/> <input type="button" id="full" value="全屏"> <input type="button" id="cancelFull" value="退出全屏"> <input type="button" id="isFull" value="是否全屏"> </div> <script> window.onload = function () { var div = document.querySelector("div"); document.querySelector("#full").onclick = function () { //使用Chrome浏览器需要加上webkit // div.webkitRequestFullScreen(); // div.requestFullscreen(); //使用FireFox浏览器需要加上moz // div.mozRequestFullScreen(); // 所有浏览器都可以全屏,使用能力测试 if (div.requestFullscreen) { div.requestFullscreen(); } else if (div.webkitRequestFullScreen) { div.webkitRequestFullScreen(); } else if (div.mozRequestFullScreen) { div.mozRequestFullScreen(); } else if (div.msRequestFullScreen) { div.msRequestFullScreen(); } } // 退出全屏,只能使用document实现 document.querySelector("#cancelFull").onclick = function () { if (document.cancelFullscreen) { document.cancelFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msCancelFullScreen) { document.msCancelFullScreen(); } } //是否是全屏状态 也是使用document document.querySelector("#isFull").onclick = function () { if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { alert(true); } else { alert(false); } } } </script> </body> </html>