HTML5–浏览器全屏操作、退出全屏、是否全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <img src="../images/l1.jpg" alt=""> <input type="button" id="full" value="全屏"> <input type="button" id="cancelFull" value="退出全屏"> <input type="button" id="isFull" value="是否全屏"> </div> <script> /*全屏操作的主要方法和属性 * 1.requestFullScreen():开启全屏显示 * 不同浏览器需要添加不同的前缀 * chrome:webkit firefox:moz ie:ms opera:o * 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现 * 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/ window.onload=function(){ var div=document.querySelector("div"); /*添加三个按钮的点击事件*/ /*全屏操作*/ document.querySelector("#full").onclick=function(){ /*div.requestFullScreen();*/ /*div.webkitRequestFullScreen();*/ /*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.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.querySelector("#isFull").onclick=function(){ /*两个细节：使用document判断 能力测试*/ if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){ alert(true); } else{ alert(false); } } } </script> </body> </html>
