devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML页面的全屏显示-Fullscreen API_html节点全屏

作者：AllinToyou | 2024-02-26 09:04:52

赞

踩

html节点全屏

使用 Fullscreen api 处理页面全屏

HTML 页面的全屏显示

使用 Element.requestFullscreen() 可以使元素进入全屏，该方法是异步方法，返回一个 Promise 对象

整个页面全屏显示

比如我们需要让整个网页全屏显示，只需要用 html 元素调用 requestFullscreen 方法即可。

示例代码：

<html>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
    </div>
  </body>
  <script>
    const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功')；
        })
        .catch(() => {
          console.log('进入全屏失败')；
        })
    }
  </script>
<html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

参数

requestFullScreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条.
可选值为 auto, hide, show, 默认值为 auto.

当元素不在文档内时, 调用requestFullScreen回失败

<html>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
    </div>
  </body>
  <script>
    const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功')；
        })
        .catch(() => {
          console.log('进入全屏失败')；
        })
    }

    // 不在文档内的内容全屏
    const el = document.createElement('div');
    el.requestFullscreen()
      .then(() => {
        console.log('全屏成功');
      })
      .catch(() => {
        console.log('全屏失败');
      });
  </script>
<html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

部分内容进入全屏状态

是部分内容进入全屏和页面全屏是一样的, 只是调用 requestFullScreen 方法的 dom 节点改为相应元素即可.

示例代码：

<html>
  <header>
    <style>
      div {
        padding: 20px;
      }
      #section-full-container {
        background-color: #409EFF;
        color: #fff;
        height: 200px;
      }
    </style>
  </header>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
    </div>
    <div id="section-full-container">
      部分全屏
      <button id="section-full-screen-btn">进入全屏</button>
    </div>
</body>
<script>
  const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功');
        })
        .catch(() => {
          console.log('进入全屏失败');
        })
    }

    // 部分内容全屏
    const sectionFullContainer = document.getElementById('section-full-container');
    const sectionFullBtn = document.getElementById('section-full-screen-btn');
    sectionFullBtn.onclick = () => {
      sectionFullContainer.requestFullscreen()
      .then(() => {
          console.log('全屏成功');
        })
        .catch(() => {
          console.log('全屏失败');
        });
    }
</script>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

退出全屏

退出全屏只需要调用 document 对象的 exitFullscreen. 调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态.
例如, 上面示例中, 先使整个页面进入全屏, 再点击部分全屏的按钮使 section-full-container 进入全屏. 那么整个时候调用 document.exitFullScreen() 时, 会返回整个页面全屏的状态, 需要再次调用 document.exitFullScreen() 才能完全退出全屏状态

示例代码

<html>
  <header>
    <style>
      div {
        padding: 20px;
      }
      #section-full-container {
        background-color: #409EFF;
        color: #fff;
        height: 200px;
      }
    </style>
  </header>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
      <button id="exit-full-screen-btn">退出全屏</button>
    </div>
    <div id="section-full-container">
      部分全屏
      <button id="section-full-screen-btn">进入全屏</button>
      <button id="section-exit-full-screen-btn">退出全屏</button>
    </div>
</body>
<script>
  const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功');
        })
        .catch(() => {
          console.log('进入全屏失败');
        })
    }
    const sectionFullContainer = document.getElementById('section-full-container');
    const sectionFullBtn = document.getElementById('section-full-screen-btn');
    sectionFullBtn.onclick = () => {
      sectionFullContainer.requestFullscreen()
      .then(() => {
          console.log('全屏成功');
        })
        .catch(() => {
          console.log('全屏失败');
        });
    }
    // 退出全屏
    const exitFullScreenBtn = document.getElementById('exit-full-screen-btn');
    const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn');
    exitFullScreenBtn.onclick = () => {
      exitFullScreen();
    }
    sectionExitFullScreenBtn.onclick = () => {
      exitFullScreen();
    }
</script>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

注意该方法是 document 对象的而不是对应元素的

事件与属性

当全屏状态改变时, 对应元素会触发 fullscreenchange 事件, 该事件会冒泡, 实际使用可以统一监听 document 对象的 fullscreenchange 事件.
document.fullScreenElement 属性可以访问当前正在全屏的元素节点. 没有页面全屏是返回 null.

示例代码

<html>
  <header>
    <style>
      div {
        padding: 20px;
      }
      #section-full-container {
        background-color: #409EFF;
        color: #fff;
        height: 200px;
      }
    </style>
  </header>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
      <button id="exit-full-screen-btn">退出全屏</button>
    </div>
    <div id="section-full-container">
      部分全屏
      <button id="section-full-screen-btn">进入全屏</button>
      <button id="section-exit-full-screen-btn">退出全屏</button>
    </div>
</body>
<script>
  const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功');
        })
        .catch(() => {
          console.log('进入全屏失败');
        })
    }
    const sectionFullContainer = document.getElementById('section-full-container');
    const sectionFullBtn = document.getElementById('section-full-screen-btn');
    sectionFullBtn.onclick = () => {
      sectionFullContainer.requestFullscreen()
      .then(() => {
          console.log('全屏成功');
        })
        .catch(() => {
          console.log('全屏失败');
        });
    }
    const exitFullScreenBtn = document.getElementById('exit-full-screen-btn');
    const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn');
    exitFullScreenBtn.onclick = () => {
      exitFullScreen();
    }
    sectionExitFullScreenBtn.onclick = () => {
      exitFullScreen();
    }

    // 监听事件
    document.onfullscreenchange = () => {
    console.log('全屏状态变更');
    // 访问当前全屏的节点
    console.log('当前全屏节点为: ', document.fullscreenElement);
  }
</script>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65

元素的全屏样式

使用伪类 :fullscreen, 可以给元素设置全屏时的属性, 当页面没有进入全屏是不生效, 全屏后才生效.
是当前元素属于全屏元素的时候才生效, 既当前元素为 document.fullScreenElement.
如果是父级或父级以上元素全屏, 该元素的 :fullscreen 样式并不会生效

注意: 该方法属于实验性方法, 有兼容性问题, 不建议实际项目中使用

示例代码

<html>
  <head>
    <style>
      #container {
        background-color: #409EFF;
        color: #fff;
        height: 200;
      }
      /* 进入全屏是使元素变为绿色 */
      #container:fullscreen {
        background-color: #67C23A;
      }
    </style>
  </head>
  <body>
    <div id="container">
      fullscreen 伪类案例
      <button id="full-screen-btn">进入全屏</button>
    </div>
  </body>
  <script>
    const container = document.getElementById('container');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      container.requestFullscreen();
    }
  </script>
<html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

解决兼容性问题

兼容性问题可以参考 MDN 相关说明, 实际使用中可以使用 fullscreen 包进行全屏显示处理.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/145320
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号