js实现全屏及退出全屏

HTML代码

1 <a class="button fr" id="full_screen"><i class="icon icon_full"></i><span>全屏</span></a>

 1 var $fullScreenEle = $('#full_screen'),
 2             $fsChildEle = $fullScreenEle.children('i'),
 3             $fsChildSpan = $fullScreenEle.children('span'),
 4             $navbarEle = $('.zh-navbar'),
 5             $headerEle = $('.zh-header');
 6         $fullScreenEle.click(function () {
 7             console.log($fsChildEle.hasClass('icon_full'))
 8             if ($fsChildEle.hasClass('icon_full')) { // 全屏
 9                 var docEle = document.documentElement;
10                 var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen;
11                 if (rfs) {
12                     rfs.call(docEle);
13                 } else if (typeof window.ActiveXObject !== "undefined") {
14                     var wscript = new ActiveXObject("WScript.Shell");
15                     if (wscript != null) {
16                         wscript.SendKeys("{F11}");
17                     }
18                 }
19                 $fsChildEle.removeClass('icon_full').addClass('icon_exit_full');
20                 $fsChildSpan.text("取消全屏");
21                 $navbarEle.hide();
22                 $headerEle.css('top', 10);
23             } else { // 退出全屏
24                 var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen;
25                 if (cfs) {
26                     cfs.call(document);
27                 } else if (typeof window.ActiveXObject !== "undefined") {
28                     var wscript = new ActiveXObject("WScript.Shell");
29                     if (wscript != null) {
30                         wscript.SendKeys("{F11}");
31                     }
32                 }
33                 $fsChildEle.addClass('icon_full').removeClass('icon_exit_full');
34                 $fsChildSpan.text("全屏");
35             }
36         });

View Code