JS全屏检测及模拟全屏方法

最新推荐文章于 2024-06-24 12:45:00 发布

jinxi1112

最新推荐文章于 2024-06-24 12:45:00 发布

阅读量662

点赞数

分类专栏： Javascript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/jinxi1112/article/details/127356790

版权

Javascript 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

<template>
    <div id="welcome">
</template>
...

mounted() {
        window.onresize = () => {
            // 判断是否全屏
            this.fullscreen = document.fullscreenElement;
        };
        const that = this;
        window.addEventListener("keydown", function (e) {
            if (e && e.keyCode == 122) {
                //捕捉F11键盘动作
                e.preventDefault(); //阻止F11默认动作
                // 自定义全屏事件
                that.handleFullScreen();
            }
        });
    },
...

handleFullScreen() {
            // 全屏切换
            // console.log("是否全屏", !!this.fullscreen);
            if (this.fullscreen) {
                // 全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            } else {
                // 非全屏
                var fullscreen = document.getElementById("welcome"); // 需要全屏的元素
                if (fullscreen.requestFullscreen) {
                    fullscreen.requestFullscreen();
                } else if (fullscreen.mozRequestFullScreen) {
                    fullscreen.mozRequestFullScreen();
                } else if (fullscreen.webkitRequestFullscreen) {
                    fullscreen.webkitRequestFullscreen();
                } else if (fullscreen.msRequestFullscreen) {
                    fullscreen.msRequestFullscreen();
                }
            }
        },