最近一個(gè)項(xiàng)目有頁(yè)面全屏的的需求，搜索了下有HTML5的全屏API可用，不過各瀏覽器的支持不一樣。

MDN Fullscreen API: The Fullscreen API provides an easy way for web content to be presented using the user's entire screen. The API lets you easily direct the browser to make an element and its children, if any, occupy the fullscreen, eliminating all browser user interface and other applications from the screen for the duration.

全屏接口提供了簡(jiǎn)單的方式通過用戶整個(gè)屏幕展示瀏覽器的內(nèi)容。這個(gè)接口讓我們很輕松的引導(dǎo)瀏覽器使一個(gè)元素和它的子元素占據(jù)整個(gè)屏幕，并且從屏幕上消除所有瀏覽器用戶界面和其它應(yīng)用程序。

一、接口使用（以谷歌瀏覽器為例）

1.requestFullscreen()

全屏請(qǐng)求方法，使用方法：Element.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>

觸發(fā)事件后會(huì)有按ESC即可退出全屏模式的文字提示。

全屏?xí)r提示信息

注意

MDN Element.requestFullscreen(): Only elements which are in the HTML namespace (that is, elements which are standard HTML), plus the <svg> and <math> elements, which are located in the top-level document or in an <iframe> with the allowfullscreen attribute can be displayed full-screen. This means that elements inside a <frame> or an <object> can't.Only elements which are in the HTML namespace (that is, elements which are standard HTML), plus the <svg> and <math> elements, which are located in the top-level document or in an <iframe> with the allowfullscreen attribute can be displayed full-screen. This means that elements inside a <frame> or an <object> can't.

1.在< iframe >框架中使用全屏需要加allowfullscreen屬性。
2.全屏請(qǐng)求只能通過用戶操作觸發(fā)，否則會(huì)出現(xiàn)Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.這樣的警告，解決辦法是將此方法綁定到某個(gè)用戶操作事件上，例如點(diǎn)擊事件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>

觸發(fā)后退出全屏恢復(fù)頁(yè)面原來的樣子，也可以按ESC退出；另外F11也可以使頁(yè)面全屏顯示和退出，但這應(yīng)該屬于瀏覽器的功能，不在HTML5 API的范疇之內(nèi)。

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

返回一個(gè)布爾值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>

二、瀏覽器兼容

由于各主流瀏覽器調(diào)用全屏接口的方法不一致，所以調(diào)用之前需要判斷一下當(dāng)前瀏覽器適用的方法。

流程圖

我簡(jiǎn)單的做了下請(qǐng)求全屏和退出全屏的適配。

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;
        // 查找請(qǐng)求
        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">請(qǐng)求</button>
<button id="exit">退出</button>
<script src="mazey-full-screen.js"></script>

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

示例代碼：GitHub