标签：glyphicon wscript javascript window docEle 全屏 var document 页面

首先是按钮样式采用的是bootstrap样式

<!--全屏-->
                            <a id="js_full_screen">
                                <i id="glyphicon" class="glyphicon glyphicon-fullscreen"></i>
                                <span class="iconfont-full-screen"></span>
                            </a>

下面是js代码

// 全屏
        var $fullScreenEle = $('#js_full_screen'),
            $fsChildEle = $fullScreenEle.children(),
            $navbarEle = $('.zh-navbar'),
            $headerEle = $('.zh-header'),
            $glyphicon = $("#glyphicon");
        $fullScreenEle.click(function() {
            if($fsChildEle.hasClass('iconfont-full-screen')) { // 全屏
                var docEle = document.documentElement;
                var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen;
                if (rfs) {
                    rfs.call(docEle);
                } else if (typeof window.ActiveXObject !== "undefined") {
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript != null) {
                        wscript.SendKeys("{F11}");
                    }
                }
                $fsChildEle.removeClass('iconfont-full-screen').addClass('iconfont-exit-screen');
                $glyphicon.removeClass('glyphicon glyphicon-fullscreen').addClass('glyphicon glyphicon-move');
                $navbarEle.hide();
                $headerEle.css('top', 10);
            } else { // 退出全屏
                var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen;
                if (cfs) {
                    cfs.call(document);
                } else if (typeof window.ActiveXObject !== "undefined") {
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript != null) {
                        wscript.SendKeys("{F11}");
                    }
                }
            }
        });

        // 通过resize事件监听退出全屏
        $(window).resize(function() {
            var prevWinHgt = window.sessionStorage.getItem('winHgt');
            if(prevWinHgt) {
                if(window.innerHeight<prevWinHgt && $fsChildEle.hasClass('iconfont-exit-screen')) {
                    $fsChildEle.removeClass('iconfont-exit-screen').addClass('iconfont-full-screen');
                    $glyphicon.removeClass('glyphicon glyphicon-move').addClass('glyphicon glyphicon-fullscreen');
                    $navbarEle.show();
                    $headerEle.css('top', 60);
                }
            }
            window.sessionStorage.setItem('winHgt', window.innerHeight);
        });

标签：glyphicon,wscript,javascript,window,docEle,全屏,var,document,页面
来源： https://blog.csdn.net/qq_19524879/article/details/120565039

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。