HTML DOM requestFullscreen() 方法

requestFullscreen()方法用來在全屏模式下打開一個(gè)元素。

此方法需要特定的前綴才能在不同的瀏覽器中工作（請參考下面的瀏覽器兼容性）。

語法：

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();
  }
}

測試看看?/?

瀏覽器兼容性

表格中的數(shù)字指定了完全支持該方法的第一個(gè)瀏覽器版本。每個(gè)瀏覽器都需要一個(gè)特定的供應(yīng)商前綴：

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

技術(shù)細(xì)節(jié)

返回值：	沒有

更多實(shí)例

以全屏模式顯示<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();
  }
}

測試看看?/?

當(dāng)頁面處于全屏模式時(shí)，可以使用CSS設(shè)置頁面樣式：

示例

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

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

div:fullscreen {
   background-color: pink;
}

測試看看?/?

JavaScript 對象

JavaScript 參考手冊

JS DOM參考手冊

HTML DOM requestFullscreen() 方法

語法：

瀏覽器兼容性

技術(shù)細(xì)節(jié)

更多實(shí)例

相關(guān)參考