JavaScript 全屏

最新推荐文章于 2024-05-20 17:33:31 发布

我是 · 闪电

最新推荐文章于 2024-05-20 17:33:31 发布

阅读量210

点赞数 2

文章标签： javascript 前端开发语言 react.js

本文链接：https://blog.csdn.net/m0_58050016/article/details/125697718

版权

😎😎😎话不多说直接上代码😎😎😎

以下是两个写好的方法,复制后直接调用对应的方法即可。

进入全屏

function FullScreen() {
    let domElement = document.documentElement;
    if (domElement.requestFullscreen) {
        domElement.requestFullscreen();
    } else if (domElement.mozRequestFullScreen) {
        domElement.mozRequestFullScreen();
    } else if (domElement.webkitRequestFullScreen) {
        domElement.webkitRequestFullScreen();
    }
};

取消全屏

function CancelFullscreen() {
    let domElement = document;
    if (domElement.exitFullscreen) {
        domElement.exitFullscreen();
    } else if (domElement.mozCancelFullScreen) {
        domElement.mozCancelFullScreen();
    } else if (domElement.webkitCancelFullScreen) {
        domElement.webkitCancelFullScreen();
    }
}

友情提示:如果是要点击时进入或取消退出全屏的话,写一个开关变量即可。如下:

var flag = true;
const clickFunction = () => {
	if(flag){
	FullScreen();
	flag = false;
	document.querySelector('#btn').innerHTML="退出全屏";
	}else{
	CancelFullscreen();
	flag = true;
	document.querySelector('#btn').innerHTML="进入全屏";
	}
 }
 <button onclick="clickFunction" id="btn">进入全屏</button>