JavaScript 實作點選/關閉全屏

今天，我們來探讨的問題是：

當點選圖檔的時候，我們需要其全屏展示，當我們再次點選的時候，圖檔退出全屏播放。

PS: 我們退出全屏播放的情況一般是按 ​

​esc​

​​ 退出。圖檔可以延伸到任何的 ​

​DOM​

​ 節點

在文末，我會将問題更新，留一個題目給讀者思考🤔

圖檔全屏，這個跟文章全屏的效果一樣，比如下面的文章全屏：

就是一個元素鋪平整個螢幕

思路

那麼，問題我們知道了。解決問題的思路是怎麼樣的呢？

1. 我們擷取到圖檔元素的​

   ​DOM​

   ​ 節點
2. 我們調用全屏的函數進行全屏展示
3. 浏覽器監聽點選事件，當圖檔是全屏的狀态，再次點選圖檔的時候，調用函數退出全屏

好了，思路有了，我們來實作下。

具體實作

假設我們有 ​

​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)​

​。

問題更新

單點選圖檔，我們需要其全屏展示。然後設定全屏時候，右上角有一個退出的按鈕。點選退出按鈕，退出全屏展示。

感興趣的讀者可以先自己嘗試下。

這裡我給出簡單的思路，可以作為參考。

答案（點選展開）

1. 設定布局，将一個 div 包裹圖檔
2. 在 div 中設定一個按鈕的元素 button，并對 button 進行 css 布局
3. 在圖檔全屏的時候，顯示 button，并對 button