如何实现全屏和退出全屏的效果?

简介: 代码实现

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fullscreen()">全屏</button>
    <button onclick="outfullscreen()">退出全屏</button>
    <script>
        // 全屏
        function fullscreen() {
            var element = document.getElementsByTagName("body")[0];
            console.log(element);
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
            console.log(element.requestFullScreen);
            if (requestMethod) {
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
        // 退出全屏
        function outfullscreen() {
            var el = document;
            var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
                el.mozCancelFullScreen || el.exitFullScreen;
            if (typeof cfs != "undefined" && cfs) {
                cfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
    </script>
</body>
</html>

效果

22fe31e9d4f64154b2ae3b0d73b26dbe.png

a495331645b7441e8cf1d06948dd44e0.png

目录
打赏
0
0
0
0
3
分享
相关文章
|
8月前
|
如何使用JS控制指定页面大小开启全屏和退出全屏
如何使用JS控制指定页面大小开启全屏和退出全屏
64 0
|
6月前
screenfull全屏、退出全屏、指定元素全屏的使用步骤
screenfull全屏、退出全屏、指定元素全屏的使用步骤
382 5
JS实现全屏和退出全屏
JS实现全屏和退出全屏
|
6月前
|
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
616 0
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
652 0
前端JS实现全屏和退出全屏的效果
前端JS实现全屏和退出全屏的效果
150 0
vue中如何实现全全全屏和退出全屏?
vue中如何实现全全全屏和退出全屏?
前端知识笔记(十四)———js全屏与退出全屏切换功能,实现样式改变效果
前端知识笔记(十四)———js全屏与退出全屏切换功能,实现样式改变效果
74 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等