【JS】实现全屏效果

最新推荐文章于 2024-07-19 15:49:07 发布

qing_小诺

最新推荐文章于 2024-07-19 15:49:07 发布

阅读量551

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_33237207/article/details/100077991

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。主要代码如下：

显示全屏：

var docElm = document.documentElement;
if (docElm.requestFullscreen) {//W3C
    docElm.requestFullscreen();
} else if (docElm.msRequestFullscreen) {//FireFox 
    docElm = document.body; //overwrite the element (for IE)
    docElm.msRequestFullscreen();
} else if (docElm.mozRequestFullScreen) {//Chrome等
    docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {//IE11
    docElm.webkitRequestFullScreen();
}

退出全屏：

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.msExitFullscreen) {
    document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

事件监听：

（在显示全屏之后，用户点击Ecs键，会响应该方法）

document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreenElement) ? "是" : "不是 ";
}, false);
document.addEventListener("msfullscreenchange", function () {
    fullscreenState.innerHTML = (document.msFullscreenElement) ? "是" : "不是 ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen) ? "是" : "不是 ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "是" : "不是 ";
}, false);

下面是完整代码，可以将下面的代码全部拷贝，自己在本地实现一下吧：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全屏展示</title>
</head>

<body>
    <div class="content">
        <p>
            <button id="view-fullscreen">显示全屏</button>
            <button id="cancel-fullscreen">退出全屏</button>
        </p>
        <p>Fullscreen state:我现在 <b id="fullscreen-state">不是 </b>全屏</p>
    </div>
</body>
<script>
    (function () {
        //全屏 
        var viewFullScreen = document.getElementById("view-fullscreen");
        if (viewFullScreen) {
            viewFullScreen.addEventListener("click", function () {
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {//W3C
                    docElm.requestFullscreen();
                } else if (docElm.msRequestFullscreen) {//FireFox 
                    docElm = document.body; //overwrite the element (for IE)
                    docElm.msRequestFullscreen();
                } else if (docElm.mozRequestFullScreen) {//Chrome等
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {//IE11
                    docElm.webkitRequestFullScreen();
                }
            }, false);
        }
        //退出全屏 
        var cancelFullScreen = document.getElementById("cancel-fullscreen");
        if (cancelFullScreen) {
            cancelFullScreen.addEventListener("click", function () {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }, false);
        }
        // 事件监听
        var fullscreenState = document.getElementById("fullscreen-state");
        if (fullscreenState) {
            document.addEventListener("fullscreenchange", function () {
                fullscreenState.innerHTML = (document.fullscreenElement) ? "是" : "不是 ";
            }, false);
            document.addEventListener("msfullscreenchange", function () {
                fullscreenState.innerHTML = (document.msFullscreenElement) ? "是" : "不是 ";
            }, false);
            document.addEventListener("mozfullscreenchange", function () {
                fullscreenState.innerHTML = (document.mozFullScreen) ? "是" : "不是 ";
            }, false);
            document.addEventListener("webkitfullscreenchange", function () {
                fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "是" : "不是 ";
            }, false);
        }
    })();
</script>

</html>

页面显示如下：

附：启蒙链接：https://www.jb51.net/article/50470.htm?pc

qing_小诺

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【JS】实现全屏效果

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。主要代码如下：显示全屏：var docElm = document.documentElement;if (docElm.requestFullscreen) {//W3C docElm.requestFullscreen();} else if (docElm.msRequestFullscr...
复制链接

扫一扫

专栏目录