HTML DOM requestFullscreen() 方法

HTML DOM Element 对象

requestFullscreen()方法用来在全屏模式下打开一个元素。

此方法需要特定的前缀才能在不同的浏览器中工作(请参考下面的浏览器兼容性)。

使用document.exitFullscreen()方法取消全屏模式。

语法:

HTMLElement.requestFullscreen()
/* 获取(<html>)元素以全屏显示页面 */
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();
  }
}
测试看看‹/›

浏览器兼容性

表格中的数字指定了完全支持该方法的第一个浏览器版本。每个浏览器都需要一个特定的供应商前缀:

Method
requestFullscreen()15.0(Webkit)9.0(moz)12.10(Webkit)5.1(Webkit)11.0(ms)

技术细节

返回值:没有

更多实例

以全屏模式显示<video>元素:

/* 获取(<video>)元素 */
var elem = document.getElementsByTagName("video")[0];

/* 全屏查看 */
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();
  }
}
测试看看‹/›

当页面处于全屏模式时,可以使用CSS设置页面样式:

div:-moz-full-screen {
   background-color: pink;
}

div:-webkit-full-screen {
   background-color: pink;
}

div:fullscreen {
   background-color: pink;
}
测试看看‹/›

相关参考

HTML DOM参考:document.exitFullscreen()方法

HTML DOM参考:document.fullscreenElement属性

HTML DOM参考:document.fullscreenEnabled属性

HTML DOM Element 对象