• 关于全屏显示问题处理


    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("全屏");
    }
    });
    }
  • 相关阅读:
    Spring 注解@Transactional
    数据库中为什么要建立视图,它有什么好处?
    类、抽象类与接口的区别
    Comparable和Comparator的区别?
    jetty安装
    python 命令行参数sys.argv
    python--用户认证登录实现
    python--查询员工信息
    python基础
    python学习之路---编程风格规范
  • 原文地址:https://www.cnblogs.com/zzp0320/p/7267075.html
Copyright © 2020-2023  润新知