Web全屏模式

MDN：全屏 API 為使用使用者的整個螢幕展現網路內容提供了一種簡單的方式。這種API讓你可以簡單地控制瀏覽器，使得一個元素與其子元素，如果存在的話，可以佔據整個螢幕，並在此期間，從螢幕上隱藏所有的瀏覽器使用者介面以及其他應用。

概覽

• document.fullscreen
• document.fullscreenElement
• document.fullscreenEnabled
• elem.requestFullscreen
• document.exitFullscreen
• document.onfullscreenchange
• document.onfullscreenerror

屬性

document.fullscreen

用於檢測當前文件是否處於全屏模式，返回值為布林型別

document.fullscreenElement

當前啟用全屏模式的元素

document.fullscreenEnabled

當前文件是否支援全屏

方法

請求全屏模式

一個全屏的請求應該由一個具體的元素髮出，以video元素為例，請求方式如下：

<
video controls id="video">
  <
source src="somevideo.webm">
<
/source>
  <
source src="somevideo.mp4">
<
/source>
<
/video>
複製程式碼

var elem = document.getElementById("video");
elem.addEventListener('click',function () { 
if (elem.requestFullscreen) { 
   elem.requestFullscreen();
  
  }
  });
複製程式碼

MDN：全屏請求必須在事件處理函式中呼叫，否則將會被拒絕。

退出全屏模式

• 方式一：按 ESC 或 F11 鍵退出全屏
• 方式二：[keydown event] + document.exitFullscreen自定義全屏退出邏輯

// 按Enter建退出全屏document.addEventListener("keydown", function(e) { 
 if (e.keyCode == 13) { 
   document.exitFullscreen();
  
  }
  }, false);
複製程式碼

注意：exitFullscreen方法只存在於document物件上，而不存在與elem

事件

onfullscreenchange

onfullscreenchange事件觸發的時刻的有2個：一是進入全屏時，二是退出全屏時。也就是說如果全屏模式的狀態發生了改變，那麼onfullscreenchange事件就會被觸發

document.onfullscreenchange = function ( event ) { 
 console.log("全屏模式狀態改變");

  };
複製程式碼

onfullscreenerror

當嘗試在不支援全屏模式的元素上請求全屏時，則會發生錯誤，這個錯誤會觸發onfullscreenerror事件

document.onfullscreenerror = function ( event ) { 
  console.log("全屏模式失敗");

  };
複製程式碼

驗證onfullscreenerror事件最簡單的方式就是：在事件監聽器之外發起全屏請求。因為**全屏請求必須在事件處理函式中呼叫，否則將會被拒絕。**在拒絕的同時會產生一個錯誤，這個錯誤會觸發onfullscreenerror事件

document.onfullscreenerror = function ( event ) { 
  console.log("全屏模式失敗");

  };
 // requestFullscreen()將會失敗，因為它在事件處理器之外document.documentElement.requestFullscreen();
複製程式碼

全屏樣式

Gecko會自動為進入全屏模式的元素新增額外樣式：width: 100%;
height: 100%l;
，目的是使其鋪滿整個螢幕；而webkit沒有這種預設行為，所以需要我們手動補充這個樣式

#video:-webkit-full-screen { 
 width: 100%;
  height: 100%;

  }複製程式碼

相容

PC端

移動端

字首

表1

表2

結語

本文絕大部分參考MDN文件，目的是整理Web全屏Api，非原創文章

原文地址：www.guoyunfeng.com/2018/08/15/…

來源：https://juejin.im/post/5b73d5d651882560ff5c15a4