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)