全屏模式

简介: 全屏模式

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

相关文章
|
20天前
|
前端开发 JavaScript
前端JS实现全屏和退出全屏的效果
前端JS实现全屏和退出全屏的效果
19 0
|
8月前
|
JavaScript 前端开发
div全屏和退出全屏
div全屏和退出全屏
|
9月前
|
API
全屏了却判断为未全屏(已解决)
全屏了却判断为未全屏(已解决)
|
开发者
全屏控件| 学习笔记
快速学习全屏控件。
56 0
全屏控件| 学习笔记
|
开发者
全屏控件|学习笔记
快速学习全屏控件
74 0
全屏控件|学习笔记
|
计算机视觉
Qt实用技巧:界面切换使用Dialog全屏切换
Qt实用技巧:界面切换使用Dialog全屏切换
多点触控与多鼠标支持
原文:多点触控与多鼠标支持 多点触控与多鼠标支持   最进将工作流平台进行了升级,除了用WF4重新构建了后台,最大的改变就是全部图形化了用户界面 原计划在用户界面中全面启用多点触控技术,但发现多点触控的效果没有想象中的那么绚.
1043 0
|
移动开发 Android开发 iOS开发
ReactNative切换Tab改变状态栏
Ready 现在大多数的ReactNative使用的路由都是react navigation.本示例就以react-navigation为例.解决其中遇到有需要切换tab来改变顶部状态栏字体以及背景色的需求 Go only have a single line of code componentDidMount() { this.
1337 0