全屏模式

最新推荐文章于 2022-10-27 14:44:00 发布

gtLBTNq9mr3

最新推荐文章于 2022-10-27 14:44:00 发布

阅读量391

点赞数

文章标签： html js android css jquery

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 事件。