码迷,mamicode.com
首页 > 其他好文 > 详细

关于全屏显示问题处理

时间:2017-08-01 11:13:39      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:code   事件   element   div   问题处理   listen   按钮   cli   ret   

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("全屏");
}
});
}

 

关于全屏显示问题处理

标签:code   事件   element   div   问题处理   listen   按钮   cli   ret   

原文地址:http://www.cnblogs.com/zzp0320/p/7267075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!