网页切换全屏(浏览器F11效果)

 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>