jquery全屏及退出全屏

涉及方法：

• requestFullScreen：请求全屏
• exitFullscreen：退出全屏
• cancelFullScreen：取消全屏
• fullscreenchange：监听全屏变化

html

<li id="js_full_screen"><span class="iconfont-full-screen"></span></li>

js

// 全屏
var $fullScreenEle = $('#js_full_screen'),
    $fsChildEle = $fullScreenEle.children(),
    $navbarEle = $('.zh-navbar'),
    $headerEle = $('.zh-header');
$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');
        $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');
            $navbarEle.show();
            $headerEle.css('top', 60);
        }
    }
    window.sessionStorage.setItem('winHgt', window.innerHeight);
});

也可通过fullscreenchange来监控全屏变化

document.addEventListener("fullscreenchange", function(e) {
    console.log("fullscreenchange", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
    console.log("mozfullscreenchange ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
    console.log("webkitfullscreenchange", e);
});
document.addEventListener("msfullscreenchange", function(e) {
    console.log("msfullscreenchange", e);
});