Web 中 JavaScript 全屏 API 介绍和使用

发布于 2017-07-03 10:37:16 字数 2998 浏览 2403 评论 0

随着我们的 Web 应用程序向原生的 APP 靠拢，应用的全屏展示需求也比较多，而 JavaScript 也正在努力的实现这个功能，JavaScript 全屏 API 提供了一种编程方式向用户请求全屏显示和退出全屏，下面是如何使用这个非常简单的全屏 API。

启动全屏模式

全屏API的 requestFullscreen 任然需要高级浏览器的支持，所以在使用的时候我需要做到兼容性检查，不同的浏览器可能接口并不一样。

// Find the right method, call on correct element
function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// Launch fullscreen for browsers that support it!
launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("videoElement"));
// any individual element

简单的调用请求的方法，可能有些浏览器会出现一个警告，等待用户确认或者拒绝，然后再显示全屏效果，这时候浏览器的地址栏、标签页和系统的任务都将会隐藏，网页的宽度和高度将缩放到当前屏幕的大小。

退出全屏模式

调用 exitFullscreen 方法即可退出全屏模式，或者用户在键盘上按下Esc按键也可以退出全屏。

// Whack fullscreen
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

// Cancel fullscreen for browsers that support it!
exitFullscreen();

注意： exitFullscreen 是一个文档对象，可以直接调用，而不需要再 document 上调用。

全屏的属性和事件

目前来说，调用这些方法和事件还是需要加上浏览器前缀，不过随着时间的推移，更多的浏览器厂商将支持这些API，那时候我们的就不需要前缀了，代码将更加的简洁。

document.fullScreenElement：元素已经是全屏展示了。
document.fullScreenEnabled：如果当前启用全屏。

fullscreenchange 事件让我们知道，当前我们应该是去请求全屏模式还是退出全屏模式：

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

你可以检测浏览器前缀事件使用随着初始全屏方法检测。

全屏CSS样式

浏览器做为我们提供一个有用的点全屏CSS控制：

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

在某些情况下，它需要一点帮助，所以上面的代码应该是如果你面对媒体一直得心应手。