使用全屏应用程序接口

在本文中,我们将涵盖 Fullscreen API 与大量的代码片段,和交互式演示。

Fullscreen API 于 2013 年推出,为浏览器提供了一种进入/退出全屏模式的本地方式,这项规范带来了大量的 JavaScript API 和 CSS 选择器,我们可以用来完善这个沉浸式的用户体验。

全屏 API 的基本知识

在网络上激活全屏模式真的很容易!目前,一些浏览器仍然需要预先设置请求全屏方法。

若要检查可用的全屏 API 方法,可以创建类似于此的辅助函数:

 1function activateFullscreen(element) {
 2  if(element.requestFullscreen) {
 3    element.requestFullscreen();        // W3C spec
 4  }
 5  else if (element.mozRequestFullScreen) {
 6    element.mozRequestFullScreen();     // Firefox
 7  }
 8  else if (element.webkitRequestFullscreen) {
 9    element.webkitRequestFullscreen();  // Safari
10  }
11  else if(element.msRequestFullscreen) {
12    element.msRequestFullscreen();      // IE/Edge
13  }
14};

<$>[注]在requestFullscreen中的请求这个词是因为浏览器没有允许(默认情况下)激活全屏模式。

退出全屏很容易,但它还需要一些浏览器检测:

1function deactivateFullscreen() {
2  if(document.exitFullscreen) {
3    document.exitFullscreen();
4  } else if (document.mozCancelFullScreen) {
5    document.mozCancelFullScreen();
6  } else if (document.webkitExitFullscreen) {
7    document.webkitExitFullscreen();
8  }
9};

使用上面的功能,要激活全屏,只需通过文件HTMLElement!

 1<button
 2  onclick="activateFullscreen(document.documentElement);"
 3>
 4  Go fullscreen!
 5</button>
 6
 7<button
 8  onclick="deactivateFullscreen();"
 9>
10  Leave fullscreen
11</button>

看《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》》《古兰经》《古兰经》《古兰经》》《古兰经》《古兰

在非传统 HTMLElements 上使用全屏 API

正如你可能猜到的,其他 HTML 元素也可以进入全屏模式,而不仅仅是文档!

在下面的演示文稿中,试着点击按钮,使<h1>、<img>和<video>进入全屏模式:

 1<button
 2  onclick="activateFullscreen(document.getElementById('my-image'));"
 3>
 4  Fullscreen #my-text!
 5</button>
 6<button
 7  onclick="activateFullscreen(document.getElementById('my-image'))"
 8>
 9  Fullscreen #my-image
10</button>
11<button
12  onclick="activateFullscreen(document.getElementById('my-video'))"
13>
14  Fullscreen #my-video
15</button>
16
17<h1 id="my-text">Hello world</h1>
18<img id="my-image" src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/alligatorio-logo.svg" width="200"/>
19<video id="my-video" controls src="big-buck-bunny.mp4" />

看《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》《古兰经》》《古兰经》《古兰经》《古兰经》《古兰经》》《古兰经》《古兰

不动产 & 事件

Fullscreen API 提供的其他特性:

document.fullScreenEnabled:返回一个布尔语表示是否网页有权进入全屏模式
document.fullScreenElement:返回一个HTMLElement节点(只有当全屏启用时)

您还需要检测浏览器:

1const fullscreenEnabled = document.fullscreenEnabled
2  || document.mozFullScreenEnable
3  || document.webkitFullscreenEnabled;
4const fullscreenElement = document.fullscreenElement
5  || document.mozFullScreenElemen
6  || document.webkitFullscreenElement;

还有一个叫做全屏更改的事件,当用户进入/退出全屏模式时,您可以听到:

 1const fullscreenElement = document.fullscreenElement
 2  || document.mozFullScreenElement
 3  || document.webkitFullscreenElement;
 4
 5document.addEventListener('fullscreenchange', (event) => {
 6  if (fullscreenElement) {
 7    console.log('Entered fullscreen:', document.fullscreenElement);
 8  } else {
 9    console.log('Exited fullscreen.');
10  }
11});

全屏元素设计

除了可用的JavaScript API之外,还有一些你可以使用的CSS假类类:

 1/* Targets the
 2  HTML element that's
 3  in fullscreen mode */
 4:fullscreen,
 5:-webkit-full-screen,
 6:-moz-full-screen,
 7:-ms-fullscreen {
 8  /* ... */
 9}
10
11/* Styling the
12  backdrop */
13::backdrop {
14  /* ... */
15}

下面是一个例子,我们在背景中添加了一种粗糙的背景颜色和不透明度规则:

1::backdrop {
2  opacity: 0.8;
3  background: #DFA612;
4}

尝试点击按钮!您可以在 Mozilla 开发者网络上阅读更多关于 :fullscreen和 :backdrop的信息。

<$>[注]W3C规格在全屏和全屏之间交替,所以你会看到较旧的规格,浏览器前缀等存在差异。

我可以使用全屏吗?来自 caniuse.com 的主要浏览器对全屏功能的支持数据。