#頭條創作挑戰賽#

本文同步本人掘金平臺的文章：https://juejin.cn/post/7135830434528624654

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

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

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 進行按鈕事件（調用退出全屏的函數）
復制代碼

你學廢了？

如果讀者覺得文章還可以，不防一鍵三連：關注?點贊?收藏

我們設計使用大屏模板或大屏報表時，都會需要瀏覽器全屏展示預覽的需求，通常我們都需要通過鍵盤F11來切換瀏覽器全屏效果。但是，也發現了一個問題就是我們面對的很多客戶，他們并不懂F11可以全屏，給產品設計溝通帶來了不便。那有沒有什么方式可以直接通過鼠標點擊按鈕來切換全屏。答案是肯定有的，今天符號作者教大家如何利用前端的JS代碼來實現瀏覽器全屏效果。

注意：

在看教程之前，請行了解一下，什么時javascirpt，JavaScript入門教程自行百度。當然，今天的案例RP也會免費提供給大家下載學習，也歡迎應用到更多的產品實踐中去

JavaScript介紹：

JavaScript是一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

先預覽一下效果：

在線演示地址：Untitled Document

JS代碼準備：

1、全屏代碼：

javascript：
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || 
element.webkitRequestFullScreen ||
element.mozRequestFullScreen || 
element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { 
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
requestFullScreen(document.documentElement);

2、退出全屏代碼：

javascript：
function exitFull() { 
var exitMethod = document.exitFullscreen || 
document.mozCancelFullScreen || 
document.webkitExitFullscreen || 
document.webkitExitFullscreen; 
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
exitFull();

Axure添加JS代碼：

最早有發過一篇《Axure生成預覽地址如何能查看到被瀏覽次數 | 人人都是產品經理》，有教過大家，Axure怎么添加JS外部代碼，不懂的可以在回去看看。

步驟一：

打開Axure，拉取一個動態面板，創建2個State面板。一個面板里放一個矩形，命名為：全屏。另一個命名為：退出。如圖：

步驟二：全屏交互制作

打開Axure，進入-全屏面板，點擊添加鼠標點擊事件，打開-當前鏈接-fx。

將前面準備好的全屏JS代碼復制到FX里保存即可。要注意的是開頭必須要加。javascript：

設置面板切換效果，如圖，當點擊時面板切換為退出面板。

步驟三：退出交互制作

打開Axure，進入-退出面板，點擊添加鼠標點擊事件，打開-當前鏈接-fx。

同樣的將前面準備好的退出全屏JS代碼復制到FX里保存即可。通樣要注意的是開頭必須要加。javascript：

至此，保存文件F5預覽試試吧。教程相關文件下載：Axure頁面全屏效果 - 產品大牛網