js 전체 화면 전환 및 각종 호환성 쓰기 실현

JS 전체 화면 은 브 라 우 저 마다 쓰기 가 다 릅 니 다.표준 적 이 고 접두사 가 없 는 것 은 MDN FullScreen API 를 참고 하 십시오.
1. FullScreen 각종 브 라 우 저의 쓰기

W3C 국제 표준 서법 규범

webkit Chrome, Safari 등 브 라 우 저의 접두사 쓰기

moz 불 여우 브 라 우 저의 접두사 쓰기

ms IE 브 라 우 저의 접두사 쓰기

W3C
webkit
moz
ms
전체 화면 열기
requestFullScreen
webkitRequestFullScreen
mozRequestFullScreen
msRequestFullScreen
전체 화면 끝내기
exitFullscreen
webkitExitFullscreen
mozCancelFullScreen
msExitFullscreen
전체 화면 요소 가 져 오기
fullscreenElement
webkitFullscreenElement
mozFullScreenElement
msFullscreenElement
전체 화면 이벤트
fullscreenchange
webkitfullscreenchange
mozfullscreenchange
msfullscreenchange
2. 전체 화면 열기

/**
 *     
 * @param {Element} element      
 */
export function requestFullScreen(element) {
  //        ，       
  const requestMethod = element.requestFullScreen || // W3C
      element.webkitRequestFullScreen || // FireFox
      element.mozRequestFullScreen || // Chrome 
      element.msRequestFullScreen // IE11
  if (requestMethod) {
    requestMethod.call(element)
  } else if (typeof window.ActiveXObject !== 'undefined') { // for Internet Explorer
    var wscript = new window.ActiveXObject('WScript.Shell')
    if (wscript !== null) {
      wscript.SendKeys('{F11}')
    }
  }
}

3. 전체 화면 종료

/**
 *     
 */
export function exitFull() {
  //        ，       
  var exitMethod = document.exitFullscreen || // W3C
      document.webkitExitFullscreen || // Chrome 
      document.mozCancelFullScreen || // FireFox
      document.msExitFullscreen // IE11
  if (exitMethod) {
    exitMethod.call(document)
  } else if (typeof window.ActiveXObject !== 'undefined') { // for Internet Explorer
    var wscript = new window.ActiveXObject('WScript.Shell')
    if (wscript !== null) {
      wscript.SendKeys('{F11}')
    }
  }
}

4. 전체 화면 사건 감청

/**
 *       
 * @param {Function} handler             
 */
export function onFullScreen(handler) {
  if (!handler) {
    console.error('        ')
    return
  }
  //            
  const fullscreenEvts = {
    'webkitRequestFullscreen': 'webkitfullscreenchange',
    'mozRequestFullScreen': 'mozfullscreenchange',
    'msRequestFullscreen': 'msfullscreenchange',
    'requestFullscreen': 'fullscreenchange'
  }
  const root = document.documentElement
  let evtName = ''
  for (let key in fullscreenEvts) {
    if (root[key]) {
      evtName = fullscreenEvts[key]
      break
    }
  }
  if (document.addEventListener) {
    document.addEventListener(evtName, handler, false)
  } else {
    document.attachEvent('on' + evtName, handler)
  }
}

5. 전체 화면 이벤트 감청 취소

/**
 *         
 * @param {Function} handler           
 */
export function offFullScreen(handler) {
  //            
  const fullscreenEvts = {
    'webkitRequestFullscreen': 'webkitfullscreenchange',
    'mozRequestFullScreen': 'mozfullscreenchange',
    'msRequestFullscreen': 'msfullscreenchange',
    'requestFullscreen': 'fullscreenchange'
  }
  const root = document.documentElement
  let evtName = ''
  for (let key in fullscreenEvts) {
    if (root[key]) {
      evtName = fullscreenEvts[key]
      break
    }
  }
  if (document.removeEventListener) {
    document.removeEventListener(evtName, handler, false)
  } else {
    document.detachEvent('on' + evtName, handler)
  }
}