关于全屏显示问题处理

Posted 2020-09-30 维尼熊的进阶路

window.isflsgrn=false;//IE11以下是否进入全屏标志，True为全屏状态，false为非全屏状态
 window.ieIsfSceen=false;//IE11是否进入全屏标志，true为全屏状态，false为非全屏状态
//跨浏览器返回当前 document是否进入了可以请求全屏模式的状态
function fullscreenEnable(){
    var isFullscreen=document.fullscreenEnabled||window.fullScreen||
document.mozFullscreenEnabled||document.webkitIsFullScreen;
return isFullscreen;
}
//全屏
var fScreen=function(){
var docElm=document.documentElement;
if(docElm.requestFullscreen){
    docElm.requestFullscreen();
}
else if(docElm.msRequestFullscreen){
 docElm.msRequestFullscreen();
ieIsfScreen=true;
}
else if(docElm.mozRequestFullScreen){
docELm.mozRequestFullScreen();
}
else if(docElm.webkitRequestFullScreen){
docElm.webkitRequestFullScreen();
}else{//对不支持全屏API浏览器的处理，隐藏不需要显示的元素
window.parent.hideTopBottom();
isflsgrn=true;
$("#fsbutton").text("退出全屏");
}
}
//退出全屏
var cfScreen=function(){
if(document.exitFullscreen){
 document.exitFullscreen();
}
else if(document.msExitFullscreen){
document.msExitFullscreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
else{
window.parent.showTopBottom();
isflsgrn=false;
$("#fsbutton").text("全屏");
}
}
//全屏按钮点击事件
$("#fsbutton").click(function(){
var isfScreen=fullscreenEnable();
if(!isfScreen && isflsgrn==false){
 if(ieIsfSceen==true){
    document.msExitFullscreen();
     ieIsfSceen=false;
     return ;
}
 fScreen();
}
else{
      cfScreen();
}
})
//键盘操作
$(document).keydown(function  (event){
         if(event.keyCode==27&&ieIsfSceen==true){
           ieIsfSceen=false;
}
});
//监听状态变化
if(window.addEventListener){
  document.addEventListener(‘fullscreenchange‘,function(){
            if($("#fsbutton").text()=="全屏"）{
              $("#fsbutton").text()=="退出全屏");
}else{
          $("#fsbutton").text("全屏");
}
});
document.addEventListener(‘webkitfullscreenchange‘,function(){
 if($("#fsbutton").text()=="全屏"）{
$("fsbutton").text("退出全屏");
}
else{
     $("#fsbutton").text("全屏");
}
});
document.addEventListener(‘mozfullscreenchange‘,function(){
     if($("#fsbutton").text()=="全屏"){
         $("#fsbutton").text("退出全屏");
}
else{
        $("#fsbutton").text("全屏");
}
});
document.addEventListener(‘MSFullscreenChange‘,function(){
  if($("#fsbutton").text()=="全屏"){
      $("#fsbutton").text("退出全屏");
}else{
      $("#fsbutton").text("全屏");
}
});
}