div全屏编辑和退出全屏

羊毛卷少女_lu

于 2024-08-01 11:35:06 发布

阅读量113

点赞数

文章标签：编辑器前端 javascript

本文链接：https://blog.csdn.net/weixin_44201656/article/details/140843462

版权

封装全屏和退出全屏fullScreen.js
/**
 *div 全屏
*/
var thatObj=null
var domName=null
var fullscreenFun = function (dom,that) {
  // 如果不允许进入全屏，发出不允许提示
  thatObj=that
  domName=dom
  var fullscreen = false;
  let fullarea = document.getElementById(dom);//设置后就是   id==con_lf_top_div 的容器全屏
  let fullScreenHeight=screen.height;

  if (fullscreen) {    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {    // 进入全屏
    if (fullarea.requestFullscreen) {
      fullarea.requestFullscreen();
    } else if (fullarea.webkitRequestFullScreen) {
      fullarea.webkitRequestFullScreen();
    } else if (fullarea.mozRequestFullScreen) {
      fullarea.mozRequestFullScreen();
    } else if (fullarea.msRequestFullscreen) {
      // IE11
      fullarea.msRequestFullscreen();
    }
    if(dom=='screenBox'){
      if(thatObj.form.scriptLanguage=="javascript"){
        thatObj.aceDefulatHeight=fullScreenHeight+'px'
      }else{
        thatObj.ace1DefulatHeight='200px'
        thatObj.aceDefulatHeight=fullScreenHeight-270+'px'
      }
      
    }
    
  }
  fullscreen = !fullscreen;
  
  // that.isFullScence = !that.isFullScence;
}
export default fullscreenFun;

//监听退出全屏事件
document.addEventListener("fullscreenchange", function (e) {
  if (document.fullscreenElement) {//进入全屏
    if(domName=='screenBox' || domName=='bigBox'||domName=='tableTest' || domName=='resBox'){
      if(thatObj){
        thatObj.isFullscreen=true;
      }
    }
  } else {//退出全屏
    if(domName=='screenBox' || domName=='bigBox'||domName=='tableTest' || domName=='resBox'){
      if(thatObj){
        thatObj.isFullscreen=false;
        thatObj.ace1DefulatHeight='150px'
        thatObj.aceDefulatHeight='300px'
      }
      
    }
  }
})

html
  <div class="ace-style" id="templateBigBox">编辑器元素</div>
//页面引用
import fullscreenFun from '@/xxx/fullScreen';
//方法调用
 //全屏
screen(){
   // 如果不允许进入全屏，发出不允许提示
   fullscreenFun("templateBigBox",this);//templateBigBox编辑器元素id
},