最近一個專案有頁面全屏的的需求，搜尋了下有HTML5的全屏API可用，不過各瀏覽器的支援不一樣。

 全屏介面提供了簡單的方式通過使用者整個螢幕展示瀏覽器的內容。這個介面讓我們很輕鬆的引導瀏覽器使一個元素和它的子元素佔據整個螢幕，並且從螢幕上消除所有瀏覽器使用者介面和其它應用程式。

一、介面使用（以谷歌瀏覽器為例）

1.requestFullscreen()

全屏請求方法，使用方法：

<div id="example">
<img src="html5.png">
<button type="button" id="requestFullscreen">requestFullscreen</button>
</div>

<script>
  // 全屏
 document.getElementById('requestFullscreen').addEventListener('click', () => {
document.querySelector('img').webkitRequestFullscreen();
});
</script>

觸發事件後會有按ESC即可退出全屏模式的文字提示。

注意
1.在< iframe >框架中使用全屏需要加 allowfullscreen 屬性。
2.全屏請求只能通過使用者操作觸發，否則會出現Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.這樣的警告，解決辦法是將此方法繫結到某個使用者操作事件上，例如點選事件 click 。

(function () {
   document.documentElement.webkitRequestFullscreen();
})();

 2.exitFullscreen() 
退出全屏模式的方法，使用方法： document.exitFullscreen() ，除了 requestFullscreen() 其它方法和屬性都是基於 document 的。

<div id="example">
<img src="html5.png">
<button type="button" id="requestFullscreen">requestFullscreen</button>
<button type="button" id="exitFullscreen">exitFullscreen</button>
</div>

<script>
// 退出全屏
document.getElementById('exitFullscreen').addEventListener('click', () => {
document.webkitExitFullscreen();
});
</script>

觸發後退出全屏恢復頁面原來的樣子，也可以按ESC退出；另外F11也可以使頁面全屏顯示和退出，但這應該屬於瀏覽器的功能，不在HTML5 API的範疇之內。

 3.fullscreenElement 
若是全屏模式下，顯示全屏的元素，若不是，返回 null 。

<div id="example">
<img src="html5.png">
<button type="button" id="requestFullscreen">requestFullscreen</button>
<button type="button" id="exitFullscreen">exitFullscreen</button>
<button type="button" id="fullscreenElement">fullscreenElement</button>
</div>

<script>
// 顯示全屏元素
document.getElementById('fullscreenElement').addEventListener('click', () => {
console.log(document.webkitFullscreenElement); // <div id=...></div> 或 null
});
</script>

4.fullscreenEnabled 
返回一個布林值 true/false ，判斷是否可用全屏模式。

<div id="example">
<img src="html5.png">
<button type="button" id="fullscreenEnabled">fullscreenEnabled</button>
</div>

<script>
// 全屏是否可用
document.getElementById('fullscreenEnabled').addEventListener('click', () => {
console.log(document.webkitFullscreenEnabled); // true
});
</script>

二、瀏覽器相容
由於各主流瀏覽器呼叫全屏介面的方法不一致，所以呼叫之前需要判斷一下當前瀏覽器適用的方法。

我簡單的做了下請求全屏和退出全屏的適配。

const MAZEY_FULL_SCREEN = function () {
let prefixArr = ['', 'webkit', 'moz', 'ms'], // 瀏覽器字首
isRightRequest, // 是否找到適配的方法
isRightExit,
requestMethod, // 全屏方法
exitMethod, // 退出全屏方法
lowerFirst = function (str) {
return str.slice(0, 1).toLowerCase() + str.slice(1);
},
requestSuffixArr = ['RequestFullscreen', 'RequestFullScreen'], // 字尾
exitSuffixArr = ['ExitFullscreen', 'CancelFullScreen'],
searchRightMethod = function (prefix, suffixArr, documentParent) {
let methodArr = suffixArr.map((suffix) => {
return prefix + suffix;
}),
method,
isRight;
methodArr.forEach((wholePrefix) => {
if (isRight) return;
if (prefix.length === 0) {
wholePrefix = lowerFirst(wholePrefix)
}
if (wholePrefix in documentParent) {
method = wholePrefix;
isRight = true;
// console.log(method);
}
});
return method;
};
prefixArr.forEach((prefix) => {
if (isRightRequest && isRightExit) return;
// 查詢請求
requestMethod = searchRightMethod(prefix, requestSuffixArr, document.documentElement);
isRightRequest = Boolean(requestMethod);
// 查詢退出
exitMethod = searchRightMethod(prefix, exitSuffixArr, document);
isRightExit = Boolean(exitMethod);
});
this.request = function (element) {
let domEle = document.querySelector(element) || document.documentElement;
domEle[requestMethod]();
};
this.exit = function () {
document[exitMethod]();
};
};

let fullscreen = new MAZEY_FULL_SCREEN();
使用示例：

<h1 id="h1">html5 - 全屏</h1>
<button id="request">請求</button>
<button id="exit">退出</button>
<script src="mazey-full-screen.js"></script>

<script>
// 請求全屏
document.getElementById('request').addEventListener('click', () => {
fullscreen.request();
});
// 退出全屏
document.getElementById('exit').addEventListener('click', () => {
fullscreen.exit();
});
</script>

示例程式碼：GitHub
---------------------
作者：mazeyqian
來源：CSDN
原文：https://blog.csdn.net/mazeyqian/article/details/78950577?utm_source=copy
版權宣告：本文為博主轉載文章，轉載請附上原文連結！