JavaScript 單鏈接切換全屏/退出全屏：狀態標誌法實現

需求

一個鏈接點擊切換：顯示「全屏顯示」→ 執行 fullScreen() → 文字變「退出全屏」；再點擊 → 執行 exitFullScreen() → 文字變回「全屏顯示」。

核心邏輯：標誌位判斷

<a href="#" onclick="return toggleFullScreen(this)">全屏顯示</a>

<script>
function toggleFullScreen(el) {
    var isFull = el.innerHTML === '全屏顯示';
    isFull ? fullScreen() : exitFullScreen();
    el.innerHTML = isFull ? '退出全屏' : '全屏顯示';
    return false; // 阻止鏈接跳轉
}

function fullScreen() {
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
    if (rfs) rfs.call(el);
    else if (window.ActiveXObject) { // IE 舊版
        new ActiveXObject("WScript.Shell").SendKeys("{F11}");
    }
}

function exitFullScreen() {
    var el = document;
    var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
    if (cfs) cfs.call(el);
    else if (window.ActiveXObject) {
        new ActiveXObject("WScript.Shell").SendKeys("{F11}");
    }
}
</script>

關鍵點

• 用元素當前文本判斷狀態，無需額外變量。
• return false 阻止 <a> 默認跳轉。
• 全屏 API 需廠商前綴兼容，IE 降級模擬 F11。
• 現代瀏覽器推薦使用 document.fullscreenElement 判斷狀態，更可靠。

現代寫法 (ES6+)

const link = document.querySelector('#fullscreen-toggle');
link.addEventListener('click', e => {
    e.preventDefault();
    if (document.fullscreenElement) {
        document.exitFullscreen();
        link.textContent = '全屏顯示';
    } else {
        document.documentElement.requestFullscreen();
        link.textContent = '退出全屏';
    }
});