JavaScript 開啟/退出 全螢幕

JavaScript 有一個很簡單的方式可以將特定的元素進入到全螢幕模式,假設我們有一個 Button
    
    <button id="btn">進入/退出全螢幕</button>
    

這樣就可以讓按鈕進入到全螢幕了
    
let btn = document.getElementById('btn');

btn.addEventListener('click', function() {
    if (!document.fullscreenElement) {
        btn.requestFullscreen().catch(err => {
            console.log(`Error: ${err.message} (${err.name})`);
        });
    } else {
        document.exitFullscreen();
    }
});
    

當然不只有按鈕,也可以替換為圖片、影片等元素進入全螢幕介面。

參考資料:
mdn - Fullscreen API

留言