api窗口全屏_使用全屏API

缺乏、安全感 2022-11-27 04:27 191阅读 0赞

api窗口全屏

In this article, we’ll cover the [Fullscreen API][] with ample amounts of code snippets, and interactive demos. It’s a suprisingly easy API to work with!

在本文中，我们将使用大量的代码片段和交互式演示来介绍[Fullscreen API][] 。 这是一个非常容易使用的API！

The Fullscreen API was introduced in 2013, and provides a native way for browsers to enter/exit fullscreen mode. This specification brought a slew of JavaScript APIs, and CSS selectors that we can use to refine this immersive user experience.

全屏API是在2013年引入的，它为浏览器提供了一种进入/退出全屏模式的原生方式。 该规范带来了许多JavaScript API和CSS选择器，我们可以使用它们来完善这种身临其境的用户体验。

## 全屏API的基础 **(**Basics of the Fullscreen API**)** ##

It’s really easy to activate fullscreen mode on the web! Currently, some browsers still require prefixing the requestFullscreen method.

在网络上激活全屏模式真的很容易！ 当前，某些浏览器仍然需要在requestFullscreen方法前添加前缀。

To check which Fullscreen API method is available, you can create a helper function similar to this:

要检查可用的全屏API方法，您可以创建类似于以下内容的辅助函数：

The word “request” in `requestFullscreen` is due to the fact that browsers don’t have permissions (by default) to activate fullscreen mode.

`requestFullscreen` “ request”一词是由于浏览器没有激活全屏模式的权限(默认情况下)。

Exiting fullscreen is pretty easy, but it also requires a bit of browser detection:

退出全屏非常简单，但是还需要一些浏览器检测：

Using the above function, to activate fullscreen, simply pass the document HTMLElement!

使用以上功能，要激活全屏，只需传递文档 HTMLElement！

<button
      onclick="activateFullscreen(document.documentElement);"
    >
      Go fullscreen!
    </button>
    
    <button
      onclick="deactivateFullscreen();"
    >
      Leave fullscreen
    </button>

See the Pen [alligatorio-fullscreen-api-1][] by wle8300 ([@wle8300][wle8300]) on [CodePen][].

请参阅[CodePen][wle8300]上[wle8300][CodePen] ( [@ wle8300][wle8300] )的Pen [alligatorio-fullscreen-api-1][] 。

### 在非常规HTMLElement上使用Fullscreen API **(**Using Fullscreen API on unconventional HTMLElements**)** ###

As you might have guessed, other HTML hlements can go into fullscreen mode too, not just document!

您可能已经猜到了，其他HTML元素也可以进入全屏模式，而不仅仅是document ！

In the demo below, try clicking the buttons to make `<h1>`, `<img>`, and `<video>` go into fullscreen mode:

在下面的演示中，尝试单击按钮使`<h1>` ， `<img>`和`<video>`进入全屏模式：

<button
      onclick="activateFullscreen(document.getElementById('my-image'));"
    >
      Fullscreen #my-text!
    </button>
    <button
      onclick="activateFullscreen(document.getElementById('my-image'))"
    >
      Fullscreen #my-image
    </button>
    <button
      onclick="activateFullscreen(document.getElementById('my-video'))"
    >
      Fullscreen #my-video
    </button>
    
    <h1 id="my-text">Hello world</h1>
    <img id="my-image" src="alligatorio-logo.svg" width="200"/>
    <video id="my-video" controls src="big-buck-bunny.mp4" />

See the Pen [alligatorio-fullscreen-api-2][] by wle8300 ([@wle8300][wle8300]) on [CodePen][].

请参阅[CodePen][wle8300]上[wle8300][CodePen] ( [@ wle8300][wle8300] )的Pen [alligatorio-fullscreen-api-2][] 。

## 属性和事件 **(**Properties & Events**)** ##

There are additional properties that Fullscreen API brings:

Fullscreen API还具有其他属性：

*  document.fullScreenEnabled: returns a boolean denoting whether the webpage has permissions to enter fullscreen mode
    
    document.fullScreenEnabled ：返回一个布尔值，表示网页是否具有进入全屏模式的权限
 *  document.fullScreenElement: returns a HTMLElement Node (only when fullscreen is activated)
    
    document.fullScreenElement ：返回HTMLElement节点(仅在激活全屏时)

You’ll also need to detect the browser:

您还需要检测浏览器：

const fullscreenEnabled = document.fullscreenEnabled
      || document.mozFullScreenEnable
      || document.webkitFullscreenEnabled;
    const fullscreenElement = document.fullscreenElement
      || document.mozFullScreenElemen
      || document.webkitFullscreenElement;

There’s also an event called fullscreenchange when the user enters/exits fullscreen mode that you can listen to:

当用户进入/退出全屏模式时，还有一个事件称为全屏更改，您可以收听：

## 样式全屏元素 **(**Styling Fullscreen Elements**)** ##

On top of the JavaScript API that’s available, there’s also a few CSS pseudo-classes you can use:

除了可用JavaScript API之外，还可以使用一些CSS伪类：

/* Targets the
      HTML element that's
      in fullscreen mode */
    :fullscreen,
    :-webkit-full-screen,
    :-moz-full-screen,
    :-ms-fullscreen {
      /* ... */
    }
    
    
    /* Styling the
      backdrop */
    ::backdrop {
      /* ... */
    }

Here’s an example where we add a groovy background-color, and opacity rules to the backdrop:

在下面的示例中，我们向背景添加了常规的background-color和不透明度规则：

::backdrop {
      opacity: 0.8;
      background: #DFA612;
    }

See the Pen [alligatorio-fullscreen-api-3][] by wle8300 ([@wle8300][wle8300]) on [CodePen][].

请参阅[CodePen][wle8300]上[wle8300][CodePen] ( [@ wle8300][wle8300] )的Pen [alligatorio-fullscreen-api-3][] 。

Try clicking the button! You can read more about [:fullscreen][fullscreen] and [:backdrop][backdrop] on the Mozilla Developer Network.

尝试单击按钮！ 您可以在Mozilla开发人员网络上阅读有关[：fullscreen][fullscreen]和[：backdrop的][backdrop]更多信息。

The W3C specification alternated between “fullscreen” and “full-screen” so you’ll see a discrepancy in older specs, browser prefixes, etc. Going forward browsers will stick with “fullscreen”

W3C规范在“全屏”和“全屏”之间交替显示，因此您会发现较早的规范，浏览器前缀等之间存在差异。前进的浏览器将继续使用“全屏”

--------------------

[Can I Use fullscreen?][Can I Use fullscreen] Data on support for the fullscreen feature across the major browsers from caniuse.com.

[我可以全屏使用吗？][Can I Use fullscreen] 来自caniuse.com的主要浏览器对全屏功能支持的数据。

> 翻译自: [https://www.digitalocean.com/community/tutorials/js-fullscreen-api][https_www.digitalocean.com_community_tutorials_js-fullscreen-api]

api窗口全屏

[Fullscreen API]: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
[alligatorio-fullscreen-api-1]: https://codepen.io/wle8300/pen/YzXeapw
[wle8300]: https://codepen.io/wle8300
[CodePen]: https://codepen.io
[alligatorio-fullscreen-api-2]: https://codepen.io/wle8300/pen/NWqyMBZ
[alligatorio-fullscreen-api-3]: https://codepen.io/wle8300/pen/gOpvzJE
[fullscreen]: https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
[backdrop]: https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
[Can I Use fullscreen]: http://caniuse.com/#feat=fullscreen
[https_www.digitalocean.com_community_tutorials_js-fullscreen-api]: https://www.digitalocean.com/community/tutorials/js-fullscreen-api