Javascript 开启浏览器全屏模式

通常在某些情况下，我们需要让浏览器开启全屏模式，以便获得更好的视觉体验，先看下全屏模式简单的几个API。

 

浏览器默认绑定

 

非全屏模式下， document的F11按键绑定开启全屏模式
全屏模式下， document的esc和F11 按键绑定关闭全屏模式

屏幕全屏模式改变事件

当成功进入全屏模式后， document会收到一个fullscreenchange 事件。 当退出全屏状态后， document又会收到fullscreenchange 事件。

var screenChange = 'webkitfullscreenchange' || 'mozfullscreenchange' || 'fullscreenchange'

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

非标准：

var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

标准：

var isFullScreen = document.fullscreenElement || document.mozFullScreenElement||document.webkitFullscreenElement

开启全屏模式

function launchFullScreen(element) {

 if (element.requestFullscreen) {

   element.requestFullscreen();

 } else if (element.mozRequestFullScreen) {

   element.mozRequestFullScreen();

 } else if (element.webkitRequestFullscreen) {

   element.webkitRequestFullscreen();

 } else if (element.msRequestFullscreen) {

   element.msRequestFullscreen();

 }