Fullscreen API(全屏操作)

2021-09-15 16:08 更新

全屏API可以控制瀏覽器的全屏顯示,讓一個(gè)Element節(jié)點(diǎn)(以及子節(jié)點(diǎn))占滿用戶的整個(gè)屏幕。目前各大瀏覽器的最新版本都支持這個(gè)API(包括IE11),但是使用的時(shí)候需要加上瀏覽器前綴。

方法

requestFullscreen()

Element節(jié)點(diǎn)的requestFullscreen方法,可以使得這個(gè)節(jié)點(diǎn)全屏。

function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.msRequestFullscreen){
    element.msRequestFullscreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen();
  }
}

launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("videoElement"));

放大一個(gè)節(jié)點(diǎn)時(shí),F(xiàn)irefox和Chrome在行為上略有不同。Firefox自動(dòng)為該節(jié)點(diǎn)增加一條CSS規(guī)則,將該元素放大至全屏狀態(tài),width: 100%; height: 100%,而Chrome則是將該節(jié)點(diǎn)放在屏幕的中央,保持原來(lái)大小,其他部分變黑。為了讓Chrome的行為與Firefox保持一致,可以自定義一條CSS規(guī)則。

:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

exitFullscreen()

document對(duì)象的exitFullscreen方法用于取消全屏。該方法也帶有瀏覽器前綴。

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

exitFullscreen();

用戶手動(dòng)按下ESC鍵或F11鍵,也可以退出全屏鍵。此外,加載新的頁(yè)面,或者切換tab,或者從瀏覽器轉(zhuǎn)向其他應(yīng)用(按下Alt-Tab),也會(huì)導(dǎo)致退出全屏狀態(tài)。

屬性

document.fullscreenElement

fullscreenElement屬性返回正處于全屏狀態(tài)的Element節(jié)點(diǎn),如果當(dāng)前沒(méi)有節(jié)點(diǎn)處于全屏狀態(tài),則返回null。

var fullscreenElement =
  document.fullscreenElement ||
  document.mozFullScreenElement ||
  document.webkitFullscreenElement;

document.fullscreenEnabled

fullscreenEnabled屬性返回一個(gè)布爾值,表示當(dāng)前文檔是否可以切換到全屏狀態(tài)。

var fullscreenEnabled =
  document.fullscreenEnabled ||
  document.mozFullScreenEnabled ||
  document.webkitFullscreenEnabled ||
  document.msFullscreenEnabled;

if (fullscreenEnabled) {
  videoElement.requestFullScreen();
} else {
  console.log('瀏覽器當(dāng)前不能全屏');
}

全屏事件

以下事件與全屏操作有關(guān)。

  • fullscreenchange事件:瀏覽器進(jìn)入或離開(kāi)全屏?xí)r觸發(fā)。

  • fullscreenerror事件:瀏覽器無(wú)法進(jìn)入全屏?xí)r觸發(fā),可能是技術(shù)原因,也可能是用戶拒絕。
document.addEventListener("fullscreenchange", function( event ) {
  if (document.fullscreenElement) {
    console.log('進(jìn)入全屏');
  } else {
    console.log('退出全屏');
  }
});

上面代碼在發(fā)生fullscreenchange事件時(shí),通過(guò)fullscreenElement屬性判斷,到底是進(jìn)入全屏還是退出全屏。

全屏狀態(tài)的CSS

全屏狀態(tài)下,大多數(shù)瀏覽器的CSS支持:full-screen偽類,只有IE11支持:fullscreen偽類。使用這個(gè)偽類,可以對(duì)全屏狀態(tài)設(shè)置單獨(dú)的CSS屬性。

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

參考鏈接

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)