JavaScript 实现点击/关闭全屏

最新推荐文章于 2024-07-26 19:01:19 发布

原创最新推荐文章于 2024-07-26 19:01:19 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

工作总结专栏收录该内容

87 篇文章

订阅专栏

本文介绍如何使用JavaScript实现图片的全屏展示与关闭功能。通过监听点击事件，并利用DOM操作来实现图片全屏显示，同时提供了兼容不同浏览器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 实现点击/关闭全屏

思路

那么，问题我们知道了。解决问题的思路是怎么样的呢？
我们获取到图片元素的 DOM 节点
我们调用全屏的函数进行全屏展示
浏览器监听点击事件，当图片是全屏的状态，再次点击图片的时候，调用函数退出全屏

具体实现

假设我们有 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()
}

当然，上面的代码并没有考虑相关的兼容性。

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()
    }
  }
}