浏览器全屏按键同f11效果

模拟键f11

// for IE,这里和fullScreen相同,模拟按下F11键退出全屏
let wscript = new ActiveXObject('WScript.Shell')
if (wscript != null) {
   wscript.SendKeys('{F11}')
}

同f11键效果生效全屏函数

//判断是否是全屏状态
var isFull =
  Math.abs(
    window.screen.height - window.document.documentElement.clientHeight,
  ) <= 17
window.onresize = function () {
  isFull =
    Math.abs(
      window.screen.height - window.document.documentElement.clientHeight,
    ) <= 17
}


// 阻止F11键默认事件,用HTML5全屏API代替
window.addEventListener('keydown', function (e) {
  e = e || window.event
  if (e.keyCode === 122 && !isFull) {
    e.preventDefault()
    // enterFullScreen()
    requestFullScreen(document.documentElement)
  }
})


// 打开浏览器全屏模式
function enterFullScreen() {
  let el = document.documentElement
  let rfs =
    el.requestFullScreen ||
    el.webkitRequestFullScreen ||
    el.mozRequestFullScreen ||
    el.msRequestFullscreen
  if (rfs) {
    // typeof rfs != "undefined" && rfs
    rfs.call(el)
  } else if (typeof window.ActiveXObject !== 'undefined') {
    // for IE,这里其实就是模拟了按下键盘的F11,使浏览器全屏
    let wscript = new ActiveXObject('WScript.Shell')
    if (wscript != null) {
      wscript.SendKeys('{F11}')
    }
  }
}


// 退出全屏
function exitFullScreen() {
  let el = document
  let cfs =
    el.cancelFullScreen ||
    el.mozCancelFullScreen ||
    el.msExitFullscreen ||
    el.webkitExitFullscreen ||
    el.exitFullscreen
  if (cfs) {
    // typeof cfs != "undefined" && cfs
    cfs.call(el)
  } else if (typeof window.ActiveXObject !== 'undefined') {
    // for IE,这里和fullScreen相同,模拟按下F11键退出全屏
    let wscript = new ActiveXObject('WScript.Shell')
    if (wscript != null) {
      wscript.SendKeys('{F11}')
    }
  }
}

系统全屏函数

// 让元素进入全屏
export function requestFullScreen(element) {
  if (element.requestFullScreen) {
    // 标准写法
    element.requestFullScreen()
  } else if (element.webkitRequestFullScreen) {
    // webkit 内核浏览器 谷歌 Safari
    element.webkitRequestFullScreen()
  } else if (element.mozRequestFullScreen) {
    // moz    内核浏览器 火狐
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    // ms ie浏览器 RequestFullscreen中 Screen中的s ie浏览器需要小写
    element.msRequestFullscreen()
  }
}


// 页面退出全屏
export function exitFullscreen() {
  if (document.exitFullscreen) {
    // 标准写法
    document.exitFullscreen()
  } else if (document.webkitCancelFullScreen) {
    // webkit 内核浏览器 谷歌 Safari
    document.webkitCancelFullScreen()
  } else if (document.mozCancelFullScreen) {
    // moz    内核浏览器  火狐
    document.mozCancelFullScreen()
  } else if (document.msExitFullscreen) {
    // ms   ie浏览器  取消全屏是Exit  不是Cancel
    document.msExitFullscreen()
  }
}


// 页面是否在全屏
export function isFullScreen() {
  if (document.fullScreen) {
    // 标准写法
    return document.fullScreen
  }
  if (document.webkitCancelFullScreen) {
    // webkit 内核浏览器 谷歌 Safari
    return document.webkitIsFullScreen
  }
  if (document.mozCancelFullScreen) {
    // moz    内核浏览器  火狐
    return document.mozFullScreen
  }
}

你可能感兴趣的:(javascript)