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>