JS实现全屏展示的具体方法_js全屏显示

最近应公司的一个小需求，需要把一个 html 页面进行全屏控制的功能，虽然很简单但是苦于之前从未做过，今天就来实操一下，下边把具体的操作方法记录下来。

html 页面

 <div class="btns">
    <button type="button" id="exitBtn" class="btn" onClick="exitFullscreen()">退出全屏</button>
    <button type="button" id="btn" class="btn" onClick="fullScreen()">全屏</button>  
  </div>
  /**其他内容代码**/
1
2
3
4
5

实现全屏的功能代码：

function fullScreen() {
    var de = document.documentElement;
      if (de.requestFullscreen) {
          de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
          de.webkitRequestFullScreen();
      }
  }
1
2
3
4
5
6
7
8
9
10

退出全屏的功能代码：

function exitFullscreen() {
  if(document.exitFullscreen) {
       document.exitFullscreen();
   } else if(document.mozCancelFullScreen) {
       document.mozCancelFullScreen();
   } else if(document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
   }
 }
1
2
3
4
5
6
7
8
9

有一点需要注意：当在 js 中使用 click 调用事件的时候会报错，（我使用的是火狐浏览器）

$("#btn").click(fullScreen()) // 注意会报错
1

查了资料后发现，由于未从短暂运行的用户生成的事件处理程序内部调用Element.mozRequestFullScreen（），因此拒绝全屏请求。这是一个安全设置，因此在正常的浏览器环境（最终用户计算机）中是正确的行为。解决方案可以使用一个回调函数来调用全屏的函数。

或者，您必须在Firefox等onClick事件上调用该函数。

 <button type="button" id="btn" class="btn" onClick="fullScreen()">全屏</button>  
1

到此，基本的全屏功能就实现了。