浏览器全屏

/**
 * 获取当前全屏的html元素，从而判断当前是否处于全屏状态
 *
 * @return  {[type]}  [return description]
 */
export function fullscreenEnabled() {
  return (
    document.fullscreenElement ||
    // @ts-ignore
    document.mozFullScreenElement ||
    // @ts-ignore
    document.webkitFullscreenElement
  )
}

/**
 * 添加全屏改变事件
 *
 * @param   {(boolean)=>void}  call  自定义全屏改变事件函数
 *
 * @return  {[type]}         清除全屏事件监听的方法
 */
export function addFullscreenChangeEvt(call: (isFullscreen: boolean) => void) {
  const handler = () => {
    const isFullscreen = document.fullscreenElement !== null
    call && call(isFullscreen)
  }

  document.addEventListener('fullscreenchange', handler)
  return () => {
    document.removeEventListener('fullscreenchange', handler)
  }
}
/**
 * 使指定元素全屏
 *
 * @param   {HTMLElement}  element  需要全屏的html元素. 不填则为: document.documentElement
 *
 * @return  {[type]}                [return description]
 */
export function fullscreen(element?: HTMLElement) {
  if (fullscreenEnabled()) {
    // 取消全屏
    cancelFullscreen()
    return
  }
  if (!element) element = document.documentElement
  let result = null
  if (element.requestFullscreen) {
    result = element.requestFullscreen()
    // @ts-ignore
  } else if (element.mozRequestFullScreen) {
    // @ts-ignore
    result = element.mozRequestFullScreen()
    // @ts-ignore
  } else if (element.msRequestFullscreen) {
    // @ts-ignore
    result = element.msRequestFullscreen()
    // @ts-ignore
  } else if (element.webkitRequestFullscreen) {
    // @ts-ignore
    result = element.webkitRequestFullScreen()
  }
  return result || Promise.reject(new Error('不支持全屏'))
}

/**
 * 取消全屏
 *
 * @return  {[type]}  [return description]
 */
export function cancelFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
    // @ts-ignore
  } else if (document.msExitFullscreen) {
    // @ts-ignore
    document.msExitFullscreen()
    // @ts-ignore
  } else if (document.mozCancelFullScreen) {
    // @ts-ignore
    document.mozCancelFullScreen()
    // @ts-ignore
  } else if (document.webkitExitFullscreen) {
    // @ts-ignore
    document.webkitExitFullscreen()
  }
}
浏览器全屏 #

浏览器全屏
