浏览器原生全屏 api 不会跨页面持久化状态，需结合 localstorage 手动保存与恢复全屏状态；本文详解实现方案、代码示例及兼容性注意事项。
浏览器原生全屏 api 不会跨页面持久化状态，需结合 localstorage 手动保存与恢复全屏状态；本文详解实现方案、代码示例及兼容性注意事项。
网页全屏（Fullscreen API）本质上是会话级临时状态：一旦页面卸载（如跳转、刷新、关闭标签页），浏览器会自动退出全屏，且该行为符合 W3C 规范，无法绕过。因此，“维持全屏”并非修复 Bug，而是通过状态记忆 + 自动重入实现的用户体验优化。
核心思路：状态持久化 + 页面加载时自动恢复
利用 localStorage 存储用户主动进入全屏的意图（布尔标志），并在新页面 load 事件中检测该标志，触发 requestFullscreen()。注意：必须由用户手势（如点击）触发首次全屏，但后续自动恢复需满足「页面加载后立即执行」且不违反浏览器的“用户激活”（User Activation）要求——现代浏览器（Chrome 92+、Firefox 88+、Edge 91+）允许在 load 或 DOMContentLoaded 后短时间内调用 requestFullscreen()，前提是此前已有有效用户交互（如点击按钮）。
✅ 完整实现代码（含防错与清理逻辑）
<!-- 全屏切换按钮（保持原有结构） -->
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button" id="fullscreen-toggle">
<i class="fas fa-expand-arrows-alt fa-lg" style="color:#060606; padding-top:10px;"></i>
</a>
</li>// 工具函数：获取当前全屏元素（兼容性封装）
function getFullscreenElement() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
null
);
}
// 工具函数：请求全屏（兼容性封装）
function requestFullscreen(el) {
if (!el) el = document.documentElement;
if (el.requestFullscreen) return el.requestFullscreen();
if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();
if (el.msRequestFullscreen) return el.msRequestFullscreen();
}
// 工具函数：退出全屏（兼容性封装）
function exitFullscreen() {
if (document.exitFullscreen) return document.exitFullscreen();
if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
if (document.msExitFullscreen) return document.msExitFullscreen();
}
// 初始化：页面加载时检查并恢复全屏
window.addEventListener('load', () => {
if (localStorage.getItem('keepFullscreen') === 'true') {
// 延迟执行确保 DOM 就绪（避免因渲染未完成导致失败）
setTimeout(() => {
if (!getFullscreenElement()) {
requestFullscreen().catch(err => {
console.warn('Auto-fullscreen failed (likely blocked by browser):', err);
localStorage.removeItem('keepFullscreen'); // 清理失效状态
});
}
}, 100);
}
});
// 绑定全屏切换事件（保留原有交互逻辑）
document.getElementById('fullscreen-toggle').addEventListener('click', (e) => {
e.preventDefault();
const isFullscreen = !!getFullscreenElement();
if (isFullscreen) {
exitFullscreen();
localStorage.setItem('keepFullscreen', 'false');
} else {
requestFullscreen().then(() => {
localStorage.setItem('keepFullscreen', 'true');
}).catch(err => {
console.error('Fullscreen request rejected:', err);
localStorage.setItem('keepFullscreen', 'false');
});
}
});
// 监听全屏状态变化（用于同步 localStorage）
document.addEventListener('fullscreenchange', () => {
const isNowFullscreen = !!getFullscreenElement();
localStorage.setItem('keepFullscreen', String(isNowFullscreen));
});
// 可选：监听页面卸载前清理（增强健壮性）
window.addEventListener('beforeunload', () => {
// 若用户手动退出全屏但未触发 click，此处可兜底更新状态
if (!getFullscreenElement()) {
localStorage.setItem('keepFullscreen', 'false');
}
});⚠️ 关键注意事项
- Safari 行为差异说明：Safari 对 fullscreenchange 事件监听更宽松，且部分版本允许更宽松的自动恢复策略，因此你观察到“在 Safari 中正常”——但这属于浏览器实现差异，并非标准行为，不可依赖。
- 安全限制：requestFullscreen() 在无用户手势上下文时会被静默拒绝（Chrome/Firefox 均如此）。本方案依赖 load 事件后的短暂宽限期，若页面加载耗时过长或用户交互中断，可能失败。
- 移动端限制：iOS Safari 不支持 requestFullscreen()（仅支持 <video> 全屏），该方案在 iOS 上无效。
- 状态清理：务必在 fullscreenchange 和 beforeunload 中同步更新 localStorage，避免状态残留导致误恢复。
- 图标同步：建议根据 getFullscreenElement() 动态切换 Font Awesome 图标（如 fa-expand-arrows-alt ↔ fa-compress-arrows-alt），提升 UI 一致性。
✅ 总结
维持全屏体验的本质是「状态记忆 + 条件重入」。通过 localStorage 记录用户意图，在每次页面加载时主动尝试恢复，并配合事件监听实时同步状态，即可在主流桌面浏览器中实现接近无缝的全屏连续性。虽无法突破规范限制，但此方案已在 AdminLTE、Vue Admin 等框架中被广泛验证，兼顾兼容性与可靠性。
