HTML页面的全屏显示-Fullscreen API

使用 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>

参数

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>

部分内容进入全屏状态

是部分内容进入全屏和页面全屏是一样的, 只是调用 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>

退出全屏

退出全屏只需要调用 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>

注意该方法是 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>

元素的全屏样式

使用伪类 :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>

解决兼容性问题

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/204397.html原文链接：https://javaforall.net

HTML页面的全屏显示-Fullscreen API

使用 Fullscreen api 处理页面全屏