js实现完整封装全屏功能，兼容多个浏览器

支持全屏的api

1.    浏览器是否支持全屏模式：document.fullscreenEnabled

2.    使元素进入全屏模式：Element.requestFullscreen()

3.    退出全屏：document.exitFullscreen()

4.    检查当前是否有节点处于全屏状态：document.fullscreenElement

5.    进入全屏/离开全屏，触发事件：document.fullscreenchange

6.    无法进入全屏时触发: document.fullscreenerror

浏览器前缀：

目前并不是所有的浏览器都实现了API的无前缀版本，所以我们需要针对不同浏览器，做一下API的兼容:

实现代码：

function getPropertyName(names, target) {
  return names.find(name => name in target)
}
 
const enterFullScreenName = getPropertyName([
  'requestFullscreen',
  'mozRequestFullScreen',
  'webkitRequestFullscreen',
  'msRequestFullscreen'
], document.documentElement)
 
// 进入全屏
export function enter(ele) {
  enterFullScreenName && ele[enterFullScreenName]()
}
 
const exitFullScreenName = getPropertyName([
  'exitFullScreen',
  'mozCancelFullScreen',
  'webkitExitFullscreen',
  'msExitFullscreen'
], document)
 
// 退出全屏
export function exit() {
  exitFullScreenName && document[exitFullScreenName]()
}
 
const fullElename = getPropertyName([
  'fullscreenElement',
  'mozFullScreenElement',
  'msFullScreenElement',
  'wenkitFullscreenElement'
], document)
 
// 判断当前那个元素全屏
export function fullEle() {
  return document[fullElename] || null
}
 
 
// 判断当前是否处于全屏状态
export function isFull() {
  return !!fullEle()
}
 
// 全屏切换
export function toggle(ele) {
  isFull() ? exit() : enter(ele)
}