JavaScript Element requestFullscreen() 方法

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

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

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

实例：

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

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

/* 执行openFullscreen()函数时，全屏打开视频。
请注意，我们必须包含不同浏览器的前缀，因为它们还不支持requestFullscreen属性 */
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();
  }
}

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
requestFullscreen()	11.0(ms)+	15.0(webkit)+	9.0(moz)+	5.1(webkit)+	12.1(webkit)+

注意：每个浏览器都需要一个特定的前缀（参见括号）：

语法

HTMLElementObject.requestFullscreen()

参数值

参数	类型	描述
没有

技术细节

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

更多例子

要全屏打开HTML页面，请使用document.documentElement而不是document.getElementByID("element")。在本例中，我们还使用close函数关闭全屏：

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

/* View in fullscreen */
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();
  }
}

/* Close fullscreen */
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();
  }
}

尝试一下

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

/* Chrome, Safari and Opera 语法 */
:-webkit-full-screen {
  background-color: yellow;
}

/* Firefox 语法 */
:-moz-full-screen {
  background-color: yellow;
}

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

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

尝试一下