Fullscreen API exitFullscreen() 方法

定义和用法

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

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

实例

例子 1

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

/* 获取 documentElement (<html>) 以全屏显示页面 */
var elem = document.documentElement;

/* 全屏查看 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

/* 关闭全屏 */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

亲自试一试

例子 2

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

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}

/* 标准语法 */
:fullscreen {
  background-color: yellow;
}

亲自试一试

语法

HTMLElementObject.exitFullscreen()

参数

无。

技术细节

返回值： 无返回值。

浏览器支持

表中的数字注明完全支持该方法的首个浏览器版本。

注释：一些浏览器需要特定的前缀（见括号）：

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)