JavaScript Element exitFullscreen() 方法

• 

  JavaScript Element exitFullscreen() 方法

  exitFullscreen()方法在全屏模式下取消元素。

  注意：此方法需要特定的前缀才能在不同的浏览器中工作（请参阅下面的浏览器支持）。

  提示：使用requestFullscreen()方法以全屏模式打开元素。

  实例：

  以全屏模式打开HTML页面，然后单击按钮将其关闭：

  /* 获取documentElement（＆lt; html＆gt;）以全屏显示页面 */
  var elem = document.documentElement;
  
  /* 全屏查看 */
  function openFullscreen() {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
    }
  }
  
  /* 关闭全屏 */
  function closeFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    }
  }
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  方法
  exitFullscreen()	11.0 (ms)	15.0 (webkit)	9.0 (moz)	5.1 (webkit)	12.10 (webkit)

• 

  语法

  HTMLElementObject.exitFullscreen()
• 

  参数值

  参数	描述
  没有

• 

  技术细节

  项目	描述
  返回值：	没有
  DOM版本	Core Level 1

• 

  更多例子

  您可以使用CSS在页面处于全屏模式时设置样式：

  /* Chrome, Safari and Opera syntax */
  :-webkit-full-screen {
    background-color: yellow;
  }
  
  /* Firefox syntax */
  :-moz-full-screen {
    background-color: yellow;
  }
  
  /* IE/Edge syntax */
  :-ms-fullscreen {
    background-color: yellow;
  }
  
  /* Standard syntax */
  :fullscreen {
    background-color: yellow;
  }
  

  尝试一下