js实现Html网页全屏效果 

 1  //全屏
 2         function toggleFullScreen() {
 3             if (!document.fullscreenElement && // alternative standard method
 4                 !document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods
 5                 if (document.documentElement.requestFullscreen) {
 6                     document.documentElement.requestFullscreen();
 7                 } else if (document.documentElement.mozRequestFullScreen) {
 8                     document.documentElement.mozRequestFullScreen();
 9                 } else if (document.documentElement.webkitRequestFullscreen) {
10                     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
11                 }
12             } else {
13                 if (document.cancelFullScreen) {
14                     document.cancelFullScreen();
15                 } else if (document.mozCancelFullScreen) {
16                     document.mozCancelFullScreen();
17                 } else if (document.webkitCancelFullScreen) {
18                     document.webkitCancelFullScreen();
19                 }
20             }
21         }

 

直接调用即可：

<button onclick="toggleFullScreen()">全屏模式</button>

posted @ 2021-04-11 12:19  勤快的懒羊羊  阅读(340)  评论(0)  编辑  收藏  举报