js实现全屏切换，以及各种兼容性写法

JS 全屏在各个浏览器中的写法各不相同。标准的、无前缀的请参考MDN FullScreen API。

一、FullScreen各种浏览器中的写法

1. W3C 国际标准写法规范
2. webkit Chrome、Safari等浏览器中的前缀写法
3. moz 火狐浏览器中的前缀写法
4. ms IE浏览器中的前缀写法

	W3C	webkit	moz	ms
打开全屏	requestFullScreen	webkitRequestFullScreen	mozRequestFullScreen	msRequestFullScreen
退出全屏	exitFullscreen	webkitExitFullscreen	mozCancelFullScreen	msExitFullscreen
获取全屏元素	fullscreenElement	webkitFullscreenElement	mozFullScreenElement	msFullscreenElement
全屏事件	fullscreenchange	webkitfullscreenchange	mozfullscreenchange	msfullscreenchange

二、打开全屏

/**
 * 打开全屏
 * @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}')
    }
  }
}

三、退出全屏

/**
 * 退出全屏
 */
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}')
    }
  }
}

四、全屏事件监听

/**
 * 全屏事件监听
 * @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)
  }
}

五、取消全屏事件监听

/**
 * 取消全屏事件监听
 * @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)
  }
}