js控制页面全屏或退出全屏

最新推荐文章于 2024-02-26 15:34:12 发布

码田里的小白菜

最新推荐文章于 2024-02-26 15:34:12 发布

阅读量630

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45294459/article/details/125146387

版权

主要用h5的 requestFullScreen方法

效果可以达到摁F11实现全屏的效果

requestFullscreen方法实现全屏具体实现代码如下

<!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>
    <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>

<body>
    <div id="app" style="    background-color: aliceblue; ">
        <button id="homeFull" type="primary" size="small" class="FullscreenBtn" @click="requestFullScreen()"
            style="position: absolute;top:90px;right:10px;">全屏显示</button>
        <button @click="exitFullscreen()">
            退出全屏
        </button>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isFullScreen: true
            },
            methods: {
                // 全屏事件
                requestFullScreen() {
                    this.isFullScreen = true
                    // 判断各种浏览器，找到正确的方法
                    var element = document.getElementById('app')
                    var requestMethod = element.requestFullScreen || // W3C
                        element.webkitRequestFullScreen || // Chrome等
                        element.mozRequestFullScreen || // FireFox
                        element.msRequestFullScreen // IE11
                    console.log(element.webkitRequestFullScreen)
                    if (requestMethod) {
                        requestMethod.call(element)
                    }
                },
                //退出全屏
                exitFullscreen() {
                    if (document.exitFullScreen) {
                        document.exitFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                }

            }
        });
    </script>

</body>

</html>