js全屏与退出全屏切换功能，实现样式改变效果

最新推荐文章于 2025-02-20 09:54:49 发布

原创最新推荐文章于 2025-02-20 09:54:49 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用JavaScript实现网页的全屏功能，包括对多种浏览器的兼容性处理，以及如何监听键盘F11按键来触发全屏模式。同时，文章还包含了退出全屏的方法和状态检查。

// 全屏
$(".full_screen").on('click', function() {
    var docElm = document.documentElement;
    //W3C
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    //FireFox
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    //Chrome等
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    //IE11
    else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }

    if (checkFull()) {
        $(".full_screen").find("span").html("全屏");
    } else {
        $(".full_screen").find("span").html("退出");
    }
});

// 退出全屏
$(".full_screen").on('click', function() {
    if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }

    if (checkFull()) {
        $(".full_screen").find("span").html("全屏");
    } else {
        $(".full_screen").find("span").html("退出");
    }
});

// 检查是否全屏
function checkFull() {
    var isFull = false;
    if (document.fullscreenEnabled || document.msFullscreenEnabled ) {
        isFull = window.fullScreen || document.webkitIsFullScreen;
        if (isFull === undefined) {
            isFull = false;
        }
    }
    return isFull;
}

// 监听按下F11键事件
$(document).on('keydown', function (e) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode == 122){//捕捉F11键盘动作
        e.preventDefault();  //阻止F11默认动作
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API
        //执行全屏
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(el);
        } else if(typeof window.ActiveXObject != "undefined"){
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript!=null) {
                wscript.SendKeys("{F11}");
            }
        }
        //监听不同浏览器的全屏事件，并件执行相应的代码
        document.addEventListener("webkitfullscreenchange", function() {//
            if (document.webkitIsFullScreen) {
                //全屏后要执行的代码
                $(".full_screen").find("span").html("退出");
            }else{
                //退出全屏后执行的代码
                $(".full_screen").find("span").html("全屏");
            }
        }, false);

        document.addEventListener("fullscreenchange", function() {
            if (document.fullscreen) {
                //全屏后执行的代码
                $(".full_screen").find("span").html("退出");
            }else{
                //退出全屏后要执行的代码
                $(".full_screen").find("span").html("全屏");
            }
        }, false);

        document.addEventListener("mozfullscreenchange", function() {
            if (document.mozFullScreen) {
                //全屏后要执行的代码
                $(".full_screen").find("span").html("退出");
            }else{
                //退出全屏后要执行的代码
                $(".full_screen").find("span").html("全屏");
            }
        }, false);

        document.addEventListener("msfullscreenchange", function() {
            if (document.msFullscreenElement) {
                //全屏后要执行的代码
                $(".full_screen").find("span").html("退出");
            }else{
                //退出全屏后要执行的代码
                $(".full_screen").find("span").html("全屏");

            }
        }, false)
    }
});