api窗口全屏_使用全屏API

缺乏、安全感 2022-11-27 04:27 254阅读 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方法,您可以创建类似于以下内容的辅助函数:

  1. function 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. };

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:

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

  1. function 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. };

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

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

  1. <button
  2. onclick="activateFullscreen(document.documentElement);"
  3. >
  4. Go fullscreen!
  5. </button>
  6. <button
  7. onclick="deactivateFullscreen();"
  8. >
  9. Leave fullscreen
  10. </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>进入全屏模式:

  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. <h1 id="my-text">Hello world</h1>
  17. <img id="my-image" src="alligatorio-logo.svg" width="200"/>
  18. <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:

您还需要检测浏览器:

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

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

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

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

样式全屏元素 (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伪类:

  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. /* Styling the
  11. backdrop */
  12. ::backdrop {
  13. /* ... */
  14. }

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

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

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

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的主要浏览器对全屏功能支持的数据。

翻译自: https://www.digitalocean.com/community/tutorials/js-fullscreen-api

api窗口全屏

发表评论

表情:
评论列表 (有 0 条评论,254人围观)

还没有评论,来说两句吧...

相关阅读