JS兼容多种浏览器的全屏代码封装

// fullscreen method binded to an event of an element

 

let obj = document.documentElement;

document.getElementById('id').addEventListener('click', function(){

  toggle(obj);

});

// fullscreen functions codes

 

function getPropertyName(names, target) {

   return names.find(name => name in target);

}

  

const enterFullScreenName = getPropertyName([

   'requestFullscreen',

   'mozRequestFullScreen',

   'webkitRequestFullscreen',

   'msRequestFullscreen'

 ],document.documentElement);

 

// 进入全屏

function enter(ele) {

   enterFullScreenName && ele[enterFullScreenName]();

 }

  

const exitFullScreenName = getPropertyName([

   'exitFullScreen',

   'mozCancelFullScreen',

   'webkitExitFullscreen',

   'msExitFullscreen'

 ], document);

  

// 退出全屏

function exit() {

   exitFullScreenName && document[exitFullScreenName]();

 }

  

const fullElename = getPropertyName([

   'fullscreenElement',

   'mozFullScreenElement',

   'msFullScreenElement',

   'wenkitFullscreenElement'

 ], document);

  

// 判断当前哪个元素全屏

function fullEle() {

   return document[fullElename] || null;

}

  

// 判断当前是否处于全屏状态

function isFull() {

   return !!fullEle();

}

  

// 全屏切换

function toggle(ele) {

   isFull() ? exit() : enter(ele);

}