如何通过点击图片实现全屏显示（支持现代浏览器）-html教程-PHP中文网

如何通过点击图片实现全屏显示（支持现代浏览器）

本文介绍如何使用原生 JavaScript 的 requestFullscreen() API，为网页中的图片添加点击即全屏的功能，并提供兼容性处理、错误捕获和退出逻辑。

本文介绍如何使用原生 javascript 的 `requestfullscreen()` api，为网页中的图片添加点击即全屏的功能，并提供兼容性处理、错误捕获和退出逻辑。

在现代 Web 开发中，无需依赖第三方库即可实现图片点击全屏效果——关键在于浏览器原生支持的 Fullscreen API。该 API 允许任意 DOM 元素（包括 <img>）进入全屏模式，且具备良好的跨浏览器支持（Chrome 71+、Firefox 64+、Edge 79+、Safari 15.4+）。

✅ 基础实现（推荐写法）

为确保代码健壮性与可维护性，建议将全屏逻辑封装为可复用函数，并绑定到目标图片上：

<!-- HTML 中为图片添加唯一标识或 class -->
@@##@@

// JavaScript：监听所有带 .fullscreen-trigger 类的图片
document.querySelectorAll('.fullscreen-trigger').forEach(img => {
  img.addEventListener('click', function (e) {
    const elem = e.target;

    // 若当前已处于全屏状态，则退出；否则请求全屏
    if (document.fullscreenElement) {
      document.exitFullscreen().catch(console.error);
    } else {
      // 兼容旧版前缀（如 Chrome  {
          console.warn('全屏请求失败:', err.name, err.message);
          alert(`无法进入全屏模式：${err.message}`);
        });
      } else {
        alert('当前浏览器不支持全屏 API');
      }
    }
  });
});

⚠️ 注意事项与最佳实践

安全限制：requestFullscreen() 必须由用户手势（如 click、touchend）触发，不能在异步回调（如 setTimeout、fetch.then）中调用，否则会被浏览器静默拒绝。

样式适配：进入全屏后，图片默认可能拉伸或留白。建议在 CSS 中增强控制：

:fullscreen img,
:-webkit-full-screen img,
:-moz-full-screen img,
:-ms-fullscreen img {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain;
  margin: 0;
}

退出提示：用户可通过 ESC 键退出全屏，也可在页面添加显式「退出全屏」按钮，监听 fullscreenchange 事件更新 UI 状态：

document.addEventListener('fullscreenchange', () => {
  const isFullscreen = !!document.fullscreenElement;
  console.log('当前全屏状态:', isFullscreen);
});

? 结合你的现有结构快速集成

你当前的 .tokenImage 图片已嵌套在 .nft 卡片内。只需在初始化时为所有 .tokenImage 绑定事件即可，无需修改 HTML 结构：

仿UC浏览器官方网站全屏jQuery幻灯片

下载

// 在页面加载完成后执行（例如放在 <script> 标签末尾或 DOMContentLoaded 中）
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.tokenImage').forEach(img => {
    img.style.cursor = 'zoom-in'; // 提供视觉反馈
    img.addEventListener('click', handleFullscreen);
  });
});

function handleFullscreen(e) {
  const img = e.target;
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    img.requestFullscreen?.()
      .catch(err => console.error('全屏失败:', err));
  }
}</script>