js实现窗口全屏示例详解

首先，实现网页全屏有两种方式：一种是使用原生JavaScript，另一种是使用第三方库。

使用原生JavaScript实现窗口全屏

function fullscreen() {
  var elem = document.documentElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

上述代码中，先获取网页根元素document.documentElement，通过判断不同浏览器是否支持全屏方法，来调用不同的方法进行全屏显示。支持的浏览器主要包括Chrome、Safari、Firefox和IE。

使用第三方库Screenfull.js实现窗口全屏

使用第三方库可以方便地实现窗口全屏，其中比较知名的是Screenfull.js。

第一步，先在网页头部引入库文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.min.js"></script>

第二步，在需要全屏显示的元素上添加事件监听。

var elem = document.getElementById('example');
elem.addEventListener('click', function() {
  if (screenfull.enabled) {
    screenfull.request(elem);
  }
});

上述代码中，如果库文件加载成功并且当前浏览器支持全屏显示，则可以通过screenfull.request()方法来进行全屏显示。

示例说明

其中一段常用于播放视频的全屏实现如下：

var video = document.getElementById('video');
video.onclick = function() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen();
  } else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
  }
}

另一个使用Screenfull.js库全屏实现的例子如下：

<button id="fullscreen">全屏演示示例</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.min.js"></script>
<script>
var elem = document.getElementById('fullscreen');
elem.addEventListener('click', function() {
  if (screenfull.enabled) {
    screenfull.request(document.documentElement);
  }
});
</script>

以上就是实现网页窗口全屏的两种方法和两条具体示例说明。