HTML页面全屏/退出全屏

最新推荐文章于 2023-11-16 16:43:10 发布

weixin_30651273

最新推荐文章于 2023-11-16 16:43:10 发布

阅读量228

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/meowv/p/10135570.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>

转载于:https://www.cnblogs.com/meowv/p/10135570.html

weixin_30651273

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML页面全屏/退出全屏

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>页面全屏/退出全屏</title> 7 </head> 8 9 <body>1...
复制链接

扫一扫