浏览器F11全屏后，为何无法通过JavaScript关闭？

当用户按下键盘的 F11 键（或 macOS 的 Command+Ctrl+F）进入浏览器的全屏模式时，许多开发者会发现一个棘手的问题：无法通过 JavaScript 代码直接退出全屏。这一限制并非代码缺陷，而是浏览器出于安全性和用户体验的主动设计。本文将深入探讨其背后的原因，并提供切实可行的解决方案。

一、为何JavaScript无法关闭F11全屏？

浏览器的全屏模式分为两种类型：

用户主动触发的全屏（F11键）
用户通过键盘快捷键直接控制浏览器全屏，此时浏览器将全屏视为系统级操作，JavaScript 无法干预。这是为了防止恶意脚本强制用户进入或退出全屏，保护用户对浏览器的控制权。
脚本触发的全屏（JavaScript API）
通过 document.documentElement.requestFullscreen() 等 API 触发的全屏，JavaScript 可以通过 document.exitFullscreen() 主动退出。但此类全屏通常需要用户手势触发（如点击按钮），且退出时也需遵循安全策略。

简而言之：用户按F11键进入的全屏，只能由用户手动退出（如再次按F11或Esc键）；而脚本触发的全屏，脚本才有权退出。

二、解决方案：从兼容性到用户体验优化

1. 明确需求：是否必须使用F11全屏？

教育/演示场景：若需要用户高度沉浸（如在线课程、PPT演示），优先使用 JavaScript API 触发全屏，从而保留代码控制权。
通用网页功能：若仅需页面铺满屏幕，可通过 CSS 模拟全屏布局（如 width: 100vw; height: 100vh;），避免依赖浏览器全屏模式。

2. 使用JavaScript全屏API（推荐）

进入全屏：绑定到用户点击事件（如按钮），调用标准化 API：

function enterFullscreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) { /* Firefox */
		element.mozRequestFullScreen();
	} else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
		element.webkitRequestFullscreen();
	} else if (element.msRequestFullscreen) { /* IE/Edge */
		element.msRequestFullscreen();
	}
}

let elementDom = document.documentElement;
enterFullscreen(elementDom);

退出全屏：通过同一上下文的代码退出：

function exitFullscreen() {
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.mozCancelFullScreen) { /* Firefox */
		document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
		document.webkitExitFullscreen();
	} else if (document.msExitFullscreen) { /* IE/Edge */
		document.msExitFullscreen();
	}
}

兼容性处理：不同浏览器的 API 前缀（如 webkitRequestFullscreen）需做兜底判断。

3. 检测全屏状态并引导用户

监听全屏变化事件：

document.addEventListener("fullscreenchange", () => {
	if (document.fullscreenElement) {
	  	console.log("已进入全屏");
	} else {
	  	console.log("已退出全屏");
	}
});

引导用户操作：在全屏模式下，通过浮动提示层告知用户“按 Esc/F11 键退出全屏”。

4. 解决问题核心代码

// 阻止F11键默认事件，用HTML5全屏API代替
window.addEventListener('keydown', function (e) {
    e = e || window.event
    if (e.keyCode == 122) {
        e.preventDefault()
        requestFullScreen();
    }
})

// 进入全屏
function requestFullScreen() {
    let elementDom = document.documentElement;
    let elementFullScreen = elementDom.requestFullScreen || elementDom.webkitRequestFullScreen || elementDom.mozRequestFullScreen || elementDom.msRequestFullscreen;
    if (elementFullScreen) {
        elementFullScreen.call(elementDom)
    }
}

这段代码主要是通过按键检测F11按下，然后通过拦截进入原本写好的全屏函数中，从而使代码走入自己提前写好的逻辑中，这样就彻底解决了F11全屏后，通过javaScript脚本关不了的尴尬了。