使用全屏(Fullscreen)API

这篇文章,将用一些代码片段和交互效果来演示Fullscreen API
这是我写的demo——全屏模式demo
大家一起来动手试试吧。

全屏(Fullscreen)API的基础

在网页上使用全屏模式其实很简单,不过,目前一些浏览器在使用requestFullscreen方法时仍然需要加前缀。
要检查哪种全屏(Fullscreen)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
  }
};

退出全屏模式也很简单,但是也需要浏览器监测:

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

使用以上辅助函数就可以在激活或者取消全屏模式.

在标签中使用全屏(Fullscreen)API

您可能已经猜到了,其他HTML元素也可以进入全屏模式,而不仅仅是document! 在下面的演示中,尝试单击按钮使
<h1><img><video>
进入全屏模式:

<button onclick="activateFullscreen(document.getElementById('my-text'));">
    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="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584477989986&di=dc7bbe02f1df393b65e39d2890bdace0&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201307%2F31%2F20130731205922_uQzvy.thumb.700_0.jpeg" width="200"/>
<video id="my-video" controls src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" />

属性和事件

全屏(Fullscreen)API有其他的属性。

  • document.fullScreenEnabled:返回一个布尔值,表示该网页是否有权进入全屏模式。
  • document.fullScreenElement:返回HTMLElement节点(仅在激活全屏时)

您还需要检测浏览器:

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

CSS设置全局模式

除了可用的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 {
  /* ... */
}

在下面的示例中,我们为背景添加了背景颜色和透明度:

    #my-image-b::backdrop {
        opacity: 0.8;
        background: #DFA612;
    }

    #my-text-b:fullscreen {
        padding: 42px;
        background-color: pink;
        border: 2px solid #f00;
        font-size: 200%;

    }

试着去点按钮吧,你可以在MDN上知道了解更多:fullscreen::backdrop