全屏模式

简介: 全屏模式

iOS Safari 没有全屏 API,但 Chrome(Android 版)、Firefox 和 IE 11+ 上则有相应的 API。

打造全屏体验时需要在意的主要 JS API 如下:

  1. element.requestFullscreen():以全屏模式显示元素。
  2. document.exitFullscreen():取消全屏模式。
  3. document.fullscreenElement:如有任何元素处于全屏模式,返回 true。

应用进入全屏模式时,无法再使用浏览器的 UI 控件。 全屏模式下的浏览器没有前进和后退这样的标准导航控件,也没有刷新按钮可以显示。

<body>
  <div>hello world</div>
  <button id="goFS">全屏</button>
  <script>
    const goFS = document.getElementById("goFS");
    goFS.addEventListener("click", function () {
      document.body.requestFullscreen();
      // 为了兼容要写两套
      document.documentElement.requestFullscreen();
    }, false);
  </script>
</body>

让 video 元素进入全屏模式与让任何其他元素进入全屏模式的方法完全相同。 只需调用 video 元素上的 requestFullscreen 方法。

<body>
  <video id="videoElement"></video>
  <button id="goFS">全屏</button>
  <script>
    const goFS = document.getElementById("goFS");
    goFS.addEventListener("click", function () {
      const videoElement = document.getElementById("videoElement");
      videoElement.requestFullscreen();
    }, false);
  </script>
</body>

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式,返回的Promise会resolve,并且该元素会收到一个fullscreenchange事件,通知它已经进入全屏模式。如果全屏请求被拒绝,返回的promise会变成rejected并且该元素会收到一个fullscreenerror事件。

相关文章
MASM32编程演示程序在窗口模式和全屏模式间切换
MASM32编程演示程序在窗口模式和全屏模式间切换
|
5月前
screenfull全屏、退出全屏、指定元素全屏的使用步骤
screenfull全屏、退出全屏、指定元素全屏的使用步骤
335 5
|
5月前
|
JavaScript
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
516 0
|
5月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
615 0
|
5月前
如何切换Hbuild - X编辑器背景色,如何切换Hbuild - X编辑器风格
如何切换Hbuild - X编辑器背景色,如何切换Hbuild - X编辑器风格
790 0
|
7月前
|
前端开发 JavaScript
前端JS实现全屏和退出全屏的效果
前端JS实现全屏和退出全屏的效果
135 0
全屏了却判断为未全屏(已解决)
全屏了却判断为未全屏(已解决)
|
JavaScript
js全屏、退出全屏、判断是否处于全屏状态
js全屏、退出全屏、判断是否处于全屏状态
336 0