526互联

jquery 实现全屏

发布时间 2023-07-06 14:34:40作者: 且行且思

主要用到两个方法

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

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');
});

其中enterClass 和 returnClass是此处按钮的样式以及位置的放置，如果想要给这个按钮加移入移除颜色的改变样式可以使用 id选择器的方式进行改变。

 

检测全屏

let fullscreenEnabled =
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled || undefined;

 if (fullscreenEnabled) {
    let de = document.documentElement;
    //打开全屏
    if (de.requestFullscreen) {
      de.requestFullscreen().then(
        (status) => {
          // 正常打开全屏不需要任何操作
          console.log('正常打开全屏');
          // do something
        },
        (err) => {
         console.log('不正常打开全屏')
         // do something 
        }
     );
   } else if (de.mozRequestFullScreen) {
     de.mozRequestFullScreen()
   } else if (de.webkitRequestFullScreen) {
     de.webkitRequestFullScreen();
   }
} else {
  console.log('无法打开全屏');
}

 

 

注意、API要求必须由用户触发，摸拟点击也无法通过。