JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

JavaScript控制浏览器全屏的方法、属性和事件

方法

requestFullscreen()

使用该方法可以将页面进入全屏模式，所有元素会充满整个浏览器窗口。

element.requestFullscreen();

exitFullscreen()

使用该方法可以退出全屏模式，使页面回到正常的窗口模式。

document.exitFullscreen();

fullscreenEnabled

该属性返回一个布尔值，表示当前浏览器是否支持全屏模式。

if (document.fullscreenEnabled) {
  // 当前浏览器支持全屏模式
} else {
  // 当前浏览器不支持全屏模式
}

fullscreenElement

该属性返回当前处于全屏模式的元素。

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;

事件

fullscreenchange

该事件在全屏模式状态发生改变时触发。

document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    console.log('进入全屏模式');
  } else {
    console.log('退出全屏模式');
  }
});

fullscreenerror

该事件在进入全屏模式失败时触发。

document.addEventListener('fullscreenerror', function() {
  console.log('进入全屏模式失败');
});

示例

示例一：进入全屏模式

var elem = document.documentElement;
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
}

示例二：退出全屏模式

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
  document.msExitFullscreen();
}

以上就是控制浏览器全屏的方法、属性和事件，可以通过这些属性和方法来实现全屏和退出全屏的操作，同时也可以通过事件来监听全屏模式是否改变及是否进入全屏模式失败等操作。