javascript 控制页面全屏显示

本文主要是介绍javascript 控制页面全屏显示，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

首先是按钮样式采用的是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);
        });

这篇关于javascript 控制页面全屏显示的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！