首先呢，大家应该都知道F11使屏幕全屏，但是我们也可以使用代码让用户点击全屏按钮来实现全屏效果
当然，除去F11，就要通过触发事件来使屏幕全屏，这里就用最经常的点击事件来做实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #content:-webkit-full-screen { background-color:rgb(255, 255, 12); width: 100%; height: 100%; } </style> </head> <body> <!-- 点击全屏,退出按钮 --> <div style="margin:0 auto;height:600px;width:700px;"> <button id="btn" onclick="btnClick()">我是全屏快点我</button> <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" > <h1>全屏和退出全屏</h1> </div> <script> function btnClick(){ var element= document.getElementById("content"); if (this.isFullscreen()) { // 全屏 exitFullScreen(); } else { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); // IE11 } } } // 退出全屏 function exitFullScreen () { let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen; if (exitFullScreen) { exitFullScreen.call(document); } } // 判断是否全屏 function isFullscreen () { return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false; } </script> </body> </html>
