api窗口全屏_使用全屏API-蒲公英云

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方法，您可以创建类似于以下内容的辅助函数：

function activateFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();        // W3C spec
  }
  else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();     // Firefox
  }
  else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();  // Safari
  }
  else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();      // IE/Edge
  }
};

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:

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

function deactivateFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
};

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) on CodePen.

请参阅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) on CodePen.

请参阅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:

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

const fullscreenElement = document.fullscreenElement
  || document.mozFullScreenElement
  || document.webkitFullscreenElement;
document.addEventListener('fullscreenchange', (event) => {
  if (fullscreenElement) {
    console.log('Entered fullscreen:', document.fullscreenElement);
  } else {
    console.log('Exited fullscreen.');
  }
});

样式全屏元素 (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) on CodePen.

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

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

尝试单击按钮！您可以在Mozilla开发人员网络上阅读有关：fullscreen和：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? Data on support for the fullscreen feature across the major browsers from caniuse.com.

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