js 全屏代码实现方法

Posted 2023-01-02 wsk198726

 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);