JavaScript 实现图片点击全屏与退出全屏功能详解

作者：纸飞机时间：2026-10-25 19:12:14浏览：138

本文详解如何使用JavaScript实现点击图片进入全屏及再次点击退出的功能。通过获取DOM元素并调用requestFullscreen和exitFullscreen方法，结合浏览器前缀处理兼容性问题，提供完整的TypeScript实现代码及进阶思考题。

引言

本文旨在探讨一个具体的前端交互场景。

当用户点击特定图片时，该图片需要以全屏模式展示；而当用户再次点击该图片时，则退出全屏状态。

需要注意的是，通常用户也可以通过按下 Esc 键来退出全屏播放。此外，全屏功能不仅限于图片，还可以应用于任何 DOM 节点。

在文章末尾，我将提出一个进阶问题，供读者思考。

图片全屏的效果与文章全屏类似，例如某些阅读模式下的全屏显示。

其核心逻辑是将指定元素铺满整个屏幕视口。

实现思路

明确了需求后，我们来梳理解决该问题的具体思路。

首先，获取目标图片元素的 DOM 节点引用。
接着，调用浏览器提供的全屏 API 函数，使该元素进入全屏展示状态。
最后，监听图片的点击事件。当图片处于全屏状态时，再次点击则调用退出全屏的函数，从而退出全屏模式。

基于上述思路，我们开始编写具体代码。

具体实现

假设 HTML 结构如下所示。

<img id="image" src="path/to/image.postfix" alt="img" />

接下来编写 JavaScript 代码来实现该功能。

// 退出全屏
ngAfterViewInit() {
  const image = document.getElementById('image');
  image.addEventListener('click', (event: any) => {
    if(document.fullscreenElement === image) {
      document.exitFullscreen();
    }
    event.preventDefault();
  })
}
// 全屏查看
public fullscreenView(): void {
  const image = document.getElementById('image');
  image.requestFullscreen()
}

此处示例使用 TypeScript 进行编写。

上述基础代码未包含浏览器兼容性处理。

requestFullscreen 和 exitFullscreen 方法在现代浏览器中支持良好，在 PC 端运行无压力。

为了兼容更多浏览器，我们需要对代码进行适配处理。

这里新建一个 utils.ts 文件来封装兼容逻辑。

export class Utils {
  public static gotoFullscreen(dom: any): void {
    if (dom.requestFullscreen) {
      dom.requestFullscreen()
    } else if (dom.mozRequestFullScreen) {
      dom.mozRequestFullScreen()
    } else if (dom.webkitRequestFullscreen) {
      dom.webkitRequestFullscreen()
    } else if (dom.msRequestFullscreen) {
      dom.msRequestFullscreen()
    } else {
      console.error('当前浏览器不支持部分全屏！')
    }
  }
  public static exitFullscreen(dom: any): void {
    if (dom.exitFullscreen) {
      dom.exitFullscreen()
    } else if (dom.webkitExitFullscreen) {
      dom.webkitExitFullscreen()
    } else if (dom.msExitFullscreen) {
      dom.msExitFullscreen()
    }
  }
}

上述两个方法均为静态方法，调用格式为类名.静态方法，例如：Utils.gotoFullscreen(dom)。