双击元素实现全屏切换需监听dblclick事件，通过document.fullscreenelement判断状态，调用requestfullscreen()或exitfullscreen()，并处理浏览器前缀、用户手势限制及promise错误捕获。
双击元素实现全屏切换，核心是监听 dblclick 事件，并结合浏览器的 Fullscreen API 控制显示状态。关键在于区分当前是否已全屏、正确调用对应方法（requestFullscreen() 或 exitFullscreen()），并处理浏览器前缀和权限限制。
监听双击事件并判断全屏状态
给目标元素绑定 dblclick 事件，在回调中检查 document.fullscreenElement（标准属性）或兼容性写法（如 document.webkitFullscreenElement）来判断是否处于全屏状态。
-
有元素在全屏：调用
document.exitFullscreen() -
无元素在全屏：调用目标元素的
requestFullscreen()
处理浏览器兼容性与前缀
旧版 Chrome/Safari/Edge 使用带前缀的方法，需做适配：
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
element.requestFullscreen()（标准） -
element.webkitRequestFullscreen()（Safari、旧 Chrome） -
element.msRequestFullscreen()（旧 Edge） -
document.exitFullscreen()同理有webkitExitFullscreen和msExitFullscreen
建议封装一个统一的全屏切换函数，内部自动检测可用方法。
注意权限与用户交互限制
现代浏览器要求全屏操作必须由**用户手势触发**（如点击、双击），不能在异步回调（如 setTimeout、fetch 回调）中调用，否则会静默失败。
- 确保
dblclick是直接用户行为，不要代理到非交互逻辑中 - 捕获
requestFullscreen()的 Promise 拒绝，用于提示错误（如用户拒绝权限、不支持等） - 可监听
fullscreenchange事件响应状态变化，例如更新按钮图标或样式
简单可运行示例
HTML 中有一个 <div id="video-container">，JS 如下：
<font size="2"><pre class="brush:php;toolbar:false;">const el = document.getElementById('video-container');
el.addEventListener('dblclick', () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
el.requestFullscreen().catch(e => console.error('进入全屏失败:', e));
}
});</pre></font>
</div>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
