jquery实现全屏

小欢！

已于 2022-07-15 11:02:30 修改

阅读量2.7k

点赞数 1

文章标签： jquery javascript 前端

于 2022-07-15 10:59:12 首次发布

本文链接：https://blog.csdn.net/weixin_43377760/article/details/125799650

版权

主要用到两个方法

调用各个浏览器提供的全屏方法

function handleFullScreen() {
    var de = document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.msRequestFullscreen) {
        de.msRequestFullscreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else {
        wtx.info("当前浏览器不支持全屏！");
    }
}

其中：msRequestFullscreen ie浏览器的全屏方法。

调用各个浏览器提供的退出全屏方法

function exitFullscreen() {
    var de = document;
    if(de.exitFullscreen) {
        de.exitFullscreen();
    } else if(de.msExitFullscreen) {
        de.msExitFullscreen();
    } else if(de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if(de.webkitExitFullscreen) {
        de.webkitExitFullscreen();
    }
}

其中：msExitFullscreen退出全屏ie浏览器的方法。

接下来就是调用两个封装好的方法实现全屏。

1、首先在body内放置一个点击事件，按钮；此处简写。

<body>
	<input class="enterClass" type="button" value="切换全屏" />
    <input class="returnClass" type="button" value="退出全屏" />
</body>

2、获取.enterClass样式的点击事件,实现全屏

$(".enterClass").click(function () {
     handleFullScreen();  //全屏
     $('.enterClass').css('display','none');
     $('.returnClass').css('display','block');
 });

3、获取.returnClass样式的点击事件，退出全屏

$(".returnClass").click(function () {
    exitFullscreen();   //退出全屏
    $('.enterClass').css('display','block');
    $('.returnClass').css('display','none');
});