本文介绍如何使用原生 JavaScript 的 requestFullscreen() API 实现点击图片后以浏览器原生全屏模式展示，兼容现代浏览器，并包含错误处理、退出全屏逻辑及样式优化建议。
本文介绍如何使用原生 javascript 的 `requestfullscreen()` api 实现点击图片后以浏览器原生全屏模式展示，兼容现代浏览器，并包含错误处理、退出全屏逻辑及样式优化建议。
要让图片点击后进入真正的全屏模式（即占据整个屏幕、隐藏浏览器地址栏与工具栏），不应依赖 CSS 缩放或模态框模拟，而应使用浏览器原生的 Fullscreen API。该 API 提供了 element.requestFullscreen() 方法，可将任意元素（如 <img>）提升为全屏根节点。
✅ 基础实现步骤
-
为图片添加唯一标识或选择器（推荐使用
class或data-*属性，避免硬编码 ID）； - 绑定点击事件，检测当前是否已处于全屏状态；
-
调用
requestFullscreen()并捕获可能的拒绝异常（如用户未授权、跨 iframe 限制等）； -
支持再次点击退出全屏，通过
document.exitFullscreen()实现。
以下是适配你现有 HTML 结构的完整示例（基于 .tokenImage 类）：
<!-- 在你的 .nft 卡片内保持原有结构 -->
<div class="nft">
<div class="main">
<img class="tokenImage" src="%7B%7B%20url_for('static',%20filename='img/%D0%BC1.jpg')%20%7D%7D" alt="NFT"><!-- 其余内容... -->
</div>
</div>
// 等待 DOM 加载完成
document.addEventListener('DOMContentLoaded', () => {
const images = document.querySelectorAll('.tokenImage');
images.forEach(img => {
img.addEventListener('click', function (e) {
const elem = this;
// 若当前无全屏元素 → 请求全屏
if (!document.fullscreenElement) {
elem.requestFullscreen()
.catch(err => {
console.warn(`全屏请求失败: ${err.name} - ${err.message}`);
alert(`无法启用全屏模式：${err.message}`);
});
}
// 若已在全屏 → 退出
else {
document.exitFullscreen().catch(err => {
console.error('退出全屏失败:', err);
});
}
});
});
});
⚠️ 注意事项与兼容性提示
- ✅ 现代浏览器均支持：Chrome 71+、Firefox 64+、Edge 79+、Safari 12.1+（注意 Safari 需启用
webkitRequestFullscreen旧前缀，但当前标准 API 已覆盖）； - ❗ 必须由用户手势触发（如
click、keydown），不能在setTimeout或load回调中直接调用，否则会被浏览器静默拒绝； - ?️ 全屏后图片默认不自适应：建议添加如下 CSS，确保图片在全屏时居中并等比缩放：
/* 全屏状态下优化图片显示 */
:fullscreen .tokenImage,
:-webkit-full-screen .tokenImage,
:-moz-full-screen .tokenImage,
:-ms-fullscreen .tokenImage {
display: block;
width: 100vw !important;
height: 100vh !important;
object-fit: contain;
margin: auto;
background: #000;
}
- ? 退出全屏时恢复原布局：无需额外操作，浏览器自动还原；但若需自定义过渡效果，可监听
fullscreenchange事件：
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
console.log('已退出全屏');
}
});
✅ 进阶建议（可选）
- 如需更沉浸体验，可配合
cursor: zoom-in / zoom-out切换光标样式； - 对于多图卡片，可统一用
event.stopPropagation()防止点击穿透到父容器（如你代码中的.nft的onclick="addProd(...)"）； - 若需支持移动端（iOS Safari），注意其对
requestFullscreen()支持有限，建议降级为「最大化显示」（CSS + viewport 控制）。
通过以上方案，你即可在不引入第三方库的前提下，稳定、轻量、语义化地实现「点击图片全屏查看」功能。
