Fullscreen API requestFullscreen() 方法

定义和用法

requestFullscreen() 方法以全屏模式打开元素。

提示：请使用 exitFullscreen() 方法取消全屏模式。

实例

例子 1

在全屏模式下显示 <video> 元素：

/* 获取要以全屏模式显示的元素（本例中的视频）：*/
var elem = document.getElementById("myvideo");

/* 执行 openFullscreen() 函数时，全屏打开视频。
请注意，我们必须包含不同浏览器的前缀，因为它们还不支持 requestFullscreen 属性 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

亲自试一试

例子 2

如需全屏打开 HTML 页面，请使用 document.documentElement 而不是 document.getElementById("element")。在这个例子中，我们还使用了一个关闭函数来关闭全屏：

/* 获取 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();
  }
}

亲自试一试

例子 3

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

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

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

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

亲自试一试

语法

HTMLElementObject.requestFullscreen()

参数

无。

技术细节

返回值： 无返回值。

浏览器支持

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

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

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)


http://www.vxiaotou.com