1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Document</title> 8 </head> 9 <body> 10 <button onclick="toggleHandle()">全屏切换</button> 11 <script> 12 let fullscreen = false; 13 function toggleHandle() { 14 let element = document.documentElement; 15 if (this.fullscreen) { 16 if (document.exitFullscreen) { 17 document.exitFullscreen(); 18 } else if (document.webkitCancelFullScreen) { 19 document.webkitCancelFullScreen(); 20 } else if (document.mozCancelFullScreen) { 21 document.mozCancelFullScreen(); 22 } else if (document.msExitFullscreen) { 23 document.msExitFullscreen(); 24 } 25 } else { 26 if (element.requestFullscreen) { 27 element.requestFullscreen(); 28 } else if (element.webkitRequestFullScreen) { 29 element.webkitRequestFullScreen(); 30 } else if (element.mozRequestFullScreen) { 31 element.mozRequestFullScreen(); 32 } else if (element.msRequestFullscreen) { 33 // IE11 34 element.msRequestFullscreen(); 35 } 36 } 37 fullscreen = !fullscreen; 38 } 39 </script> 40 </body> 41 </html>