javascript中让指定dom元素全屏需调用element.requestfullscreen()，须在用户事件中触发；通过document.fullscreenelement判断状态，监听document的fullscreenchange事件；退出全屏调用document.exitfullscreen()。

JavaScript 中让页面中的某个节点进入全屏显示，主要依靠 Fullscreen API，它提供了标准、跨浏览器（现代主流浏览器）的方式控制元素全屏。关键不是整个页面，而是指定的 DOM 元素（比如一个 <div>、<code><video></video> 或图表容器）。

调用 element.requestFullscreen() 方法

这是最核心的操作。需注意：

• 必须在用户触发的事件（如点击、按键）中调用，不能在页面加载或定时器里直接执行，否则多数浏览器会拒绝（出于安全和体验考虑）；
• 需要处理浏览器前缀兼容（虽然现代浏览器基本支持无前缀版本，但可加一层兜底）；
• 调用前建议检查该元素是否支持全屏（例如是否被禁用、是否在 iframe 中且未设置 allowfullscreen）。

示例代码：

const target = document.getElementById('my-panel');
if (target) {
  // 标准方法
  if (target.requestFullscreen) {
    target.requestFullscreen();
  } else if (target.webkitRequestFullscreen) { // Safari
    target.webkitRequestFullscreen();
  } else if (target.msRequestFullscreen) { // IE11
    target.msRequestFullscreen();
  }
}

监听全屏状态变化

通过 document.fullscreenElement 可以判断当前是否有元素处于全屏，以及是哪个元素。推荐监听 fullscreenchange 事件来响应状态切换：

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已进入全屏，当前元素：', document.fullscreenElement.id);
  } else {
    console.log('已退出全屏');
  }
});

注意：事件名是 fullscreenchange（没有 on 前缀），且在 document 上监听，不是在目标元素上。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

退出全屏的正确方式

退出全屏不操作原元素，而是调用 document.exitFullscreen()：

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
  document.msExitFullscreen();
}

也可封装成通用函数，配合按钮使用：

function toggleFullscreen(el) {
  if (!document.fullscreenElement) {
    el.requestFullscreen?.();
  } else {
    document.exitFullscreen?.();
  }
}

样式适配与注意事项

元素进入全屏后，会自动获得一些默认样式（如宽高占满屏幕、z-index 极高）。你通常需要：

• 为全屏状态下的元素添加 CSS 样式，例如用 :fullscreen 伪类（Chrome/Firefox 支持），或更兼容的 :-webkit-full-screen、:-ms-fullscreen；
• 确保父容器不干扰（比如 overflow: hidden 可能裁剪内容）；
• 视频等媒体元素若要全屏播放，建议直接对 <video></video> 调用，而非其外层容器（否则可能无法触发原生控件）；
• iframe 中的内容想全屏，需在其标签上添加 allow="fullscreen" 属性。