requestFullscreen仅触发浏览器全屏，不自动实现沉浸式开发；需手动隐藏UI、监听fullscreenchange事件、处理焦点恢复，并确保在用户手势中调用。
requestFullscreen 本身不能直接让编辑器“沉浸式开发”，它只是触发浏览器全屏——真正的沉浸感取决于你如何控制编辑器容器、隐藏干扰元素、处理键盘焦点和响应式行为。
为什么调用 requestFullscreen 后编辑器没变全屏？
常见原因是目标元素未正确指定，或被浏览器策略拦截：
-
requestFullscreen()必须在用户手势（如click、keydown）中调用，异步回调（如setTimeout或 Promise resolve 后）会失败 - 目标元素（比如
<div id="editor">）需是文档内真实存在的节点，且不能是<iframe>内嵌内容（跨域 iframe 不允许全屏） - 部分浏览器（如 Safari）要求页面启用
allowfullscreen属性，尤其是嵌入 iframe 场景 - 若父容器有
overflow: hidden或固定宽高，全屏后视觉上仍可能被裁剪
怎么让编辑器容器真正撑满全屏并隐藏干扰 UI？
全屏 API 只切换显示状态，不自动改样式。你需要监听 fullscreenchange 事件，手动切换 class：
const editorEl = document.getElementById('editor');
function enterFullscreen() {
if (editorEl.requestFullscreen) {
editorEl.requestFullscreen();
}
}
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement === editorEl) {
document.body.classList.add('fullscreen-editor');
// 隐藏顶部菜单、侧边栏、状态栏等
document.querySelector('#toolbar').style.display = 'none';
document.querySelector('#sidebar').style.display = 'none';
} else {
document.body.classList.remove('fullscreen-editor');
document.querySelector('#toolbar').style.display = '';
document.querySelector('#sidebar').style.display = '';
}
});
注意：不要依赖 document.fullscreenElement === null 判断退出，因为该值在非全屏时为 null，但某些浏览器（如旧版 Firefox）可能短暂为 undefined，稳妥写法是用 !document.fullscreenElement。
立即学习“前端免费学习笔记（深入）”；
键盘快捷键（如 F11、Ctrl+Shift+F）能触发吗？
不能。浏览器禁止脚本主动触发 F11 类系统级全屏；requestFullscreen 是唯一标准方式，且必须由用户显式触发。可行方案：
- 绑定
keydown监听Ctrl+Shift+F（或自定义组合键），在事件处理器内立即调用requestFullscreen - 避免监听
F11：该键被浏览器独占，JS 无法捕获或阻止 - 确保快捷键逻辑在编辑器获得焦点时才生效，防止误触 —— 比如检查
document.activeElement === editorEl或其子元素 - macOS 上
Cmd+Shift+F更自然，需同时兼容metaKey和ctrlKey
退出全屏后光标丢失、编辑器失焦怎么办？
这是高频问题：全屏退出时，焦点常回到 body 或 document，导致键盘输入失效。必须手动恢复：
- 退出前缓存当前编辑焦点位置（如用
getSelection().getRangeAt(0)或编辑器自身的 API，如 CodeMirror 的getCursor()） - 在
fullscreenchange事件中检测到退出后，立刻调用editorEl.focus()，再恢复光标（如有必要） - 若用的是 Monaco Editor 或 Ace，它们有自己的
focus()方法，优先调用，而非原生focus() - 某些编辑器（如 Tiptap）需要配合
editor.commands.focus()才能可靠激活
别忽略移动端：iOS Safari 对 requestFullscreen 支持有限，且退出后常不触发 fullscreenchange，建议加个兜底定时器检测 document.fullscreenElement 状态变化。
