全屏模式fullscreen

最新推荐文章于 2024-09-25 08:29:43 发布

「已注销」

最新推荐文章于 2024-09-25 08:29:43 发布

阅读量1.4w

点赞数 1

分类专栏： JavaScript 文章标签： javascript dom

本文链接：https://blog.csdn.net/duola8789/article/details/78437048

版权

JavaScript 专栏收录该内容

94 篇文章 0 订阅

订阅专栏

参考

fullscreen API 接口

属性1：fullscreenElement，该属性返回当前处于全屏模式的DOM元素。

属性2：fullscreenEnabled，该属性返回当前 document 是否进入了可以请求全屏模式的状态。

方法1：requestFullscreen()，请求进入全屏模式。

方法2：exitFullscreen()，退出全屏模式。

事件1：fullscreenchange，进入/退出全屏模式切换时会触发。

事件2：fullscreenerror，进入/退出全屏模式失败时会触发。

由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理

跨浏览器返回正处于全屏的元素

function fullscreenElement() {

  var fullscreenEle = document.fullscreenElement ||

    document.mozFullScreenElement ||

    document.webkitFullscreenElement;

  //注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null

  console.log("全屏元素：" + fullscreenEle);

  return fullscreenEle;

}

跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态

function fullscreenEnable() {

  var isFullscreen = document.fullscreenEnabled ||

    window.fullScreen ||

    document.webkitIsFullScreen ||

    document.msFullscreenEnabled;

//注意：要在用户授权全屏后才能准确获取当前的状态

  if (isFullscreen) {

    console.log('全屏模式');

  } else {

    console.log('非全屏模式');

  }

}

跨浏览器发动全屏

function lanchFullscreen(element) {

  if (element.requestFullscreen) {

    element.requestFullscreen();

  }

  else if (element.mozRequestFullScreen) {

    element.mozRequestFullScreen();

  }

  else if (element.msRequestFullscreen) {

    element.msRequestFullscreen();

  }

  else if (element.webkitRequestFullscreen) {

    element.webkitRequestFullScreen();

  }

}

跨浏览器退出全屏

function exitFullscreen() {

  if (document.exitFullscreen) {

    document.exitFullscreen();

  }

  else if (document.mozCancelFullScreen) {

    document.mozCancelFullScreen();

  }

  else if (document.msExitFullscreen) {

    document.msExiFullscreen();

  }

  else if (document.webkitCancelFullScreen) {

    document.webkitCancelFullScreen();

  }

}

各浏览器fullscreenchange 事件处理

document.addEventListener('fullscreenchange', function(){ /*code*/ });

document.addEventListener('webkitfullscreenchange', function(){ /*code*/});

document.addEventListener('mozfullscreenchange', function(){ /*code*/});

document.addEventListener('MSFullscreenChange', function(){ /*code*/});

各浏览器fullscreenerror 事件处理

document.addEventListener('fullscreenerror', function(){ /*code*/ });

document.addEventListener('webkitfullscreenerror', function(){ /*code*/});

document.addEventListener('mozfullscreenerror', function(){ /*code*/);

document.addEventListener('MSFullscreenError', function(){ /*code*/ });

跨浏览器全屏模式下样式代码

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Full-screen</title>
  <script SRC="../lib/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      background: grey;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    :-webkit-full-screen .container {
      background: red;
    }
    .btn {
      width: 300px;
      height: 30px;
      font-size: 16px;
    }

  </style>
</head>
<body>
<div class="container">
  <button id="btn" class="btn">click</button>
</div>
<script>
  var button = document.getElementById('btn');
  // 进入全屏
  function launchFullScreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  // 退出全屏
  function exitFullScreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozExitFullScreen) {
      document.mozExitFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }

  button.onclick = function () {
    var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;// 判断是否全屏
    if (!isFullScreen) {
      launchFullScreen(document.documentElement); // 整个页面全屏
      // launchFullScreen(document.getElementById("btn")); // 某个元素全屏
    }
    else {
      exitFullScreen();
    }
    var fullScreenElement = document.fullscreenEnabled || document.mozFullscreenElement || document.webkitFullscreenElement; // 当前处于全屏状态的元素 element.
    var fullScreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled; // 标记 fullScreen 当前是否可用.
    console.log(fullScreenElement);
    console.log(fullScreenEnabled)
  };

  document.addEventListener('fullscreenchange', function () {
    alert(123)
  });
  document.addEventListener('webkitfullscreenchange', function () {
    alert(123)
  });
  document.addEventListener('mozfullscreenchange', function () {
    alert(123)
  });
  document.addEventListener('MSFullscreenChange', function () {
    alert(123)
  });

</script>
</body>
</html>