js浏览器全屏与退出全屏， window.open

 

 官方文档

// 设置全屏对象，可以为div/img  
let element = document.documentElement;  
// 判断是否为支持ActiveXObject，IE支持,此方法为按下F11
if (typeof window.ActiveXObject != "undefined") { 
  /* eslint-disable no-undef */
  let wscript = new ActiveXObject("WScript.Shell");
  if (wscript != null) {
    wscript.SendKeys("{F11}");
  }
} else {
// 设置浏览器全屏，此方法会导致全屏后上传图片退出，目前未发现解决方案
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  }
// 元素全屏改变监听
  element.addEventListener('fullscreenchange', (event) => {
    if (!document.fullscreenElement) {
      // 退出全屏后
     }
  });
// 退出全屏
 exitFullscreen () {
      if (document.exitFullScreen) {
        document.exitFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },

全屏css

.div{
 position: fixed!important;
    object-fit: contain;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    margin: 0 !important;
}

 

css伪类:fullscreen应用于当前处于全屏显示模式的元素

#fullscreen:fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}

 window.open()新窗口

window.open("url", 'self', "fullscreen,scrollbars,  left=0")  
  'self'   弹出窗口的名字（不是文件名），非必须，可用空''代替；   
  height=100   窗口高度；   
  width=400   窗口宽度；   
  top=0   窗口距离屏幕上方的象素值  
  left=0   窗口距离屏幕左侧的象素值   
  toolbar=no   是否显示工具栏   
  menubar，scrollbars   表示菜单栏和滚动栏   
  resizable=no   是否允许改变窗口大小   
  location=no   是否显示地址栏
  status=no   是否显示状态栏内的信息（通常是文件已经打开)
  fullscreen  是否全屏
  yes为true ，no为false