网页全屏候选元素用set管理，初始化时通过queryselectorall筛选常见标签并验证requestfullscreen方法存在且元素已连接dom，再监听fullscreenchange事件动态添加当前全屏元素，自动去重且兼容跨浏览器限制。
在网页全屏状态切换时，用 Set 记录支持全屏的元素，核心是监听 fullscreenchange 事件，并在触发时收集当前文档中所有能调用 .requestFullscreen() 的元素（如 <div>、<code><video></video>、<iframe></iframe> 等），同时避免重复添加。关键不是“所有元素”，而是“当前可进入全屏的候选元素”——通常指那些未被禁用、未被 shadow DOM 隔离、且满足全屏策略（如用户手势触发）的元素。
初始化一个 Set 并预筛可全屏元素
页面加载后，可预先扫描常见容器类元素（不强制全部扫描，避免性能开销），加入 Set。注意：只加那些具备 requestFullscreen 方法的元素，跳过 document 或 window 等无效目标。
- 用
querySelectorAll选中常用候选标签：'div, section, article, main, video, iframe, canvas' - 遍历结果，用
typeof el.requestFullscreen === 'function'过滤真支持者 - 将通过验证的元素加入
Set，自动去重
监听全屏状态变化并动态更新
fullscreenchange 事件本身不提供“哪些元素刚被全屏”，但它发生时，你可以检查 document.fullscreenElement —— 若为非 null，说明某个元素正处于全屏；若为 null，说明已退出。此时可选择：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 仅记录当前全屏的元素（单个）→ 直接存入
Set（自动覆盖） - 记录历史中所有曾成功全屏过的元素 → 每次
document.fullscreenElement存在时，add()进去 - 避免无效值：排除
document、shadowRoot或已移除 DOM 的元素（用el.isConnected判断）
处理跨浏览器兼容性与权限限制
某些元素即使有 requestFullscreen 方法，也可能因策略（如 iframe 缺少 allow="fullscreen"）或安全上下文（非 HTTPS / 非用户手势）而无法真正全屏。此时调用会静默失败或抛错，但不影响 Set 记录逻辑。建议：
- 在调用
.requestFullscreen()前检查el.matches(':fullscreen')或document.fullscreenElement === el，避免重复请求 - 捕获 Promise rejection（现代 API 返回 Promise）：
el.requestFullscreen().catch(() => {}) - 不要把失败尝试的元素从
Set中删掉——它仍属于“支持全屏的元素集合”，只是本次未成功
实用示例代码
以下是一段轻量、可直接运行的脚本：
const fullscreenCandidates = new Set();
// 初始化：收集页面中明确支持 requestFullscreen 的元素
document.querySelectorAll('div, section, article, main, video, iframe, canvas')
.forEach(el => {
if (typeof el.requestFullscreen === 'function' && el.isConnected) {
fullscreenCandidates.add(el);
}
});
// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
const current = document.fullscreenElement;
if (current && typeof current.requestFullscreen === 'function') {
fullscreenCandidates.add(current); // 记录这次实际进入全屏的元素
}
});
// ✅ 使用时可随时读取：[...fullscreenCandidates] 或 fullscreenCandidates.size
