null - 程序员宅基地

全屏模式fullscreen_fullscreen error-程序员宅基地

技术标签： dom JavaScript javascript

参考

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>

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

前端设置条件限制form表单提交到后端解决方案_jsp前端页面将表单是否提交成功作为限制条件-程序员宅基地

文章浏览阅读375次。<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> function checkName() { var name = document.getElementB..._jsp前端页面将表单是否提交成功作为限制条件

计算机网络sequence number,TCP协议中SequenceNumber和Ack Numbe-程序员宅基地

文章浏览阅读1k次。Sequence Numberlzyws7393074532892018-04-25Number Sequenceqq_391789932452017-09-21理解TCP序列号(Sequence Number)和确认号(Acknowledgment Number)hebbely9822017-01-14Number Sequence(规律)l25336363712902017-07-18Numb..._ack num

计算机系统启动项设置密码,电脑开机第一道密码怎么设置 - 卡饭网-程序员宅基地

文章浏览阅读5.9k次。笔记本电脑怎么进CMOS密码巧设置笔记本电脑怎么进CMOS密码巧设置笔记本电脑为了保护用户的数据安全，往往采用加密的方式，最常见的还是CMOS密码加密技术。为了让你的重要数据更加安全，你可能需要设置不同的密码，这也就要求你记住许多密码。对于笔记本电脑用户来说，真的需要设置一道道密码关卡吗?非也非也! 一、认识与设置笔记本电脑的CMOS密码笔记本电脑的CMOS密码大致分为超级密码(Supervi..._电脑第一道密码修改

VulnHub靶机-Jangow: 1.0.1_jangow01-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏5次。迟到的文章，就当库存发出来吧~_jangow01

spark实战之RDD的cache或persist操作不会触发transformation计算_spark cache和persist不生效-程序员宅基地

文章浏览阅读1.7w次，点赞2次，收藏5次。默认情况下RDD的transformation是lazy形式，实际计算只有在ation时才会进行，而且rdd的计算结果默认都是临时的，用过即丢弃，每个action都会触发整个DAG的从头开始计算，因此在迭代计算时都会想到用cache或persist进结果进行缓存。敝人看到很多资料或书籍有的说是persist或cache会触发transformation真正执行计算，有的说是不会！敝人亲自实验了一把..._spark cache和persist不生效

html文字滚动_html滚动-程序员宅基地

文章浏览阅读2.4k次。HTML之marquee(文字滚动)详解语法：以下是一个最简单的例子：代码如下:Hello, World下面这两个事件经常用到：onMouseOut=“this.start()” ：用来设置鼠标移出该区域时继续滚动onMouseOver=“this.stop()”：用来设置鼠标移入该区域时停止滚动代码如下:onMouseOut=“this.start()” ：用来设置鼠标移出该区域时继续滚动 onMouseOver=“this.stop()”：用来设置鼠标移入该区域时停止滚动这是一个完_html滚动

随便推点

树莓派GPIO简单操作_树莓派怎么读取gpio口上的信息-程序员宅基地

文章浏览阅读637次。树莓派的GPIO操作被抽象为文件读写，下面以一个例子来说明GPIO操作。_树莓派怎么读取gpio口上的信息

【汽车电子】浅谈车载系统QNX_车机qnx虚拟化软件系统架构-程序员宅基地

文章浏览阅读1.7k次。QNX是一种商用的遵从POSIX规范的类Unix实时操作系统，目标市场主要是面向嵌入式系统。它可能是最成功的微内核操作系统之一。QNX是一种商用的类Unix实时操作系统，遵从POSⅨ规范，目标市场主要是嵌入式系统[1]。QNX成立于1980年，是加拿大一家知名的嵌入式系统开发商。QNX的应用范围极广，包含了：控制保时捷跑车的音乐和媒体功能、核电站和美国陆军无人驾驶Crusher坦克的控制系统[2]，还有RIM公司的BlackBerry PlayBook平板电脑。_车机qnx虚拟化软件系统架构