js 全屏代码实现方法

 1 /* 全屏方法
 2  * =========
 3     <button class="roll-nav roll-right fullscreen">
 4         <i class="fa fa-arrows-alt"></i>
 5     </button>
 6 */
 7 +function ($) {
 8     'use strict';
 9
10     /*
11     * [setFullscreen 设置全屏]
12     * @param {domElement} element [DOM节点对象(可选)]
13     */
14     var setFullscreen = function (element) {
15         var el = element instanceof HTMLElement ? element : document.documentElement;
16         var rfs = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
17         if (rfs) {
18             rfs.call(el);
19         } else if (window.ActiveXObject) {
20             var ws = new ActiveXObject("WScript.Shell");
21             ws && ws.SendKeys("{F11}");
22         }
23     }
24     /*
25     * [exitFullscreen 退出全屏]
26     */
27     var exitFullscreen = function () {
28         var efs = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
29         if (efs) {
30             efs.call(document);
31         } else if (window.ActiveXObject) {
32             var ws = new ActiveXObject("WScript.Shell");
33             ws && ws.SendKeys("{F11}");
34         }
35     }
36
37     var isFullScreen = false;
38     var handleFullScreen = function () {
39         if (isFullScreen) {
40             exitFullscreen();
41             isFullScreen = false;
42         } else {
43             setFullscreen();
44             isFullScreen = true;
45         }
46     }
47
48     $("button.fullscreen").on('click', function (event) {
49         handleFullScreen();
50     });
51 }(jQuery);