jquery全屏及退出全屏

Astrian 發(fā)布于2019-08-23 14:58 / 3534人閱讀

摘要：涉及方法請求全屏退出全屏取消全屏監(jiān)聽全屏變化全屏全屏退出全屏通過事件監(jiān)聽退出全屏也可通過來監(jiān)控全屏變化

涉及方法：

requestFullScreen：請求全屏

exitFullscreen：退出全屏

cancelFullScreen：取消全屏

fullscreenchange：監(jiān)聽全屏變化

html

// 全屏
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事件監(jiān)聽退出全屏
$(window).resize(function() {
    var prevWinHgt = window.sessionStorage.getItem("winHgt");
    if(prevWinHgt) {
        if(window.innerHeight
也可通過fullscreenchange來監(jiān)控全屏變化
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);
});