摘要：全屏為使用用戶(hù)的整個(gè)屏幕展現(xiàn)網(wǎng)絡(luò)內(nèi)容提供了一種簡(jiǎn)單的方式。退出全屏模式方式一按或鍵退出全屏方式二自定義全屏退出邏輯按建退出全屏注意方法只存在于對(duì)象上，而不存在與事件事件觸發(fā)的時(shí)刻的有個(gè)一是進(jìn)入全屏?xí)r，二是退出全屏?xí)r。

MDN：全屏 API 為使用用戶(hù)的整個(gè)屏幕展現(xiàn)網(wǎng)絡(luò)內(nèi)容提供了一種簡(jiǎn)單的方式。這種API讓你可以簡(jiǎn)單地控制瀏覽器，使得一個(gè)元素與其子元素，如果存在的話(huà)，可以占據(jù)整個(gè)屏幕，并在此期間，從屏幕上隱藏所有的瀏覽器用戶(hù)界面以及其他應(yīng)用。

document.fullscreen

document.fullscreenElement

document.fullscreenEnabled

elem.requestFullscreen

document.exitFullscreen

document.onfullscreenchange

document.onfullscreenerror

用于檢測(cè)當(dāng)前文檔是否處于全屏模式，返回值為布爾類(lèi)型

當(dāng)前激活全屏模式的元素

當(dāng)前文檔是否支持全屏

一個(gè)全屏的請(qǐng)求應(yīng)該由一個(gè)具體的元素發(fā)出，以video元素為例，請(qǐng)求方式如下：

var elem = document.getElementById("video");
elem.addEventListener("click",function () {
    if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
});

MDN：全屏請(qǐng)求必須在事件處理函數(shù)中調(diào)用，否則將會(huì)被拒絕。

方式一：按 ESC 或 F11 鍵退出全屏

方式二：[keydown event] + document.exitFullscreen自定義全屏退出邏輯

// 按Enter建退出全屏
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    document.exitFullscreen();
  }
}, false);

注意：exitFullscreen方法只存在于document對(duì)象上，而不存在與elem

onfullscreenchange事件觸發(fā)的時(shí)刻的有2個(gè)：一是進(jìn)入全屏?xí)r，二是退出全屏?xí)r。也就是說(shuō)如果全屏模式的狀態(tài)發(fā)生了改變，那么onfullscreenchange事件就會(huì)被觸發(fā)

document.onfullscreenchange = function ( event ) {
  console.log("全屏模式狀態(tài)改變");
};

當(dāng)嘗試在不支持全屏模式的元素上請(qǐng)求全屏?xí)r，則會(huì)發(fā)生錯(cuò)誤，這個(gè)錯(cuò)誤會(huì)觸發(fā)onfullscreenerror事件

document.onfullscreenerror = function ( event ) { 
  console.log("全屏模式失敗");
};

驗(yàn)證onfullscreenerror事件最簡(jiǎn)單的方式就是：在事件監(jiān)聽(tīng)器之外發(fā)起全屏請(qǐng)求。
因?yàn)?strong>全屏請(qǐng)求必須在事件處理函數(shù)中調(diào)用，否則將會(huì)被拒絕。在拒絕的同時(shí)會(huì)產(chǎn)生一個(gè)錯(cuò)誤，這個(gè)錯(cuò)誤會(huì)觸發(fā)onfullscreenerror事件

document.onfullscreenerror = function ( event ) { 
  console.log("全屏模式失敗");
}; 

// requestFullscreen()將會(huì)失敗，因?yàn)樗谑录幚砥髦?document.documentElement.requestFullscreen();

Gecko會(huì)自動(dòng)為進(jìn)入全屏模式的元素添加額外樣式：width: 100%; height: 100%l; ，目的是使其鋪滿(mǎn)整個(gè)屏幕；而webkit沒(méi)有這種默認(rèn)行為，所以需要我們手動(dòng)補(bǔ)充這個(gè)樣式

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

本文絕大部分參考MDN文檔，目的是整理Web全屏Api，非原創(chuàng)文章

原文地址：https://www.guoyunfeng.com/20...