HTML页面全屏/退出全屏

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>页面全屏/退出全屏</title>
 7 </head>
 8 
 9 <body>
10     <a class="screen-full" id="full" href="javascript:;">全屏</a>
11 </body>
12 
13 </html>
14 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
15 <script>
16 $('#full').click(function() {
17     var ele = document.documentElement;
18     var SCREEN_FULL_TEXT = "全屏";
19     var SCREEN_REST_TEXT = "退出全屏";
20     var SCREEN_FULL = 'screen-full';
21     var SCREEN_REST = 'screen-restore';
22     var iconElem = $(this);
23     if (iconElem.hasClass(SCREEN_FULL)) {
24         var reqFullScreen = ele.requestFullScreen || ele.webkitRequestFullScreen || ele.mozRequestFullScreen || ele.msRequestFullscreen;
25         if (typeof reqFullScreen !== 'undefined' && reqFullScreen) {
26             reqFullScreen.call(ele);
27         };
28         iconElem.addClass(SCREEN_REST).removeClass(SCREEN_FULL);
29         iconElem.text(SCREEN_REST_TEXT);
30     } else {
31         if (document.exitFullscreen) {
32             document.exitFullscreen();
33         } else if (document.mozCancelFullScreen) {
34             document.mozCancelFullScreen();
35         } else if (document.webkitCancelFullScreen) {
36             document.webkitCancelFullScreen();
37         } else if (document.msExitFullscreen) {
38             document.msExitFullscreen();
39         }
40         iconElem.addClass(SCREEN_FULL).removeClass(SCREEN_REST);
41         iconElem.text(SCREEN_FULL_TEXT);
42     }
43 });
44 </script>

__EOF__

本文作者：阿星Plus
本文链接：https://www.cnblogs.com/meowv/p/10135570.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！