JavaScript 实现点击/关闭全屏

JavaScript 实现点击/关闭全屏

思路

• 那么，问题我们知道了。解决问题的思路是怎么样的呢？

• 我们获取到图片元素的 DOM 节点

• 我们调用全屏的函数进行全屏展示

• 浏览器监听点击事件，当图片是全屏的状态，再次点击图片的时候，调用函数退出全屏

具体实现

• 假设我们有 html 代码如下：

• 现在我们编写下 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()
      }
    }
  }

• 上面两个方法都是静态方法，调用方式 类名.静态方法，比如：Utils.gotoFullscreen(dom)。