摘要:推薦這么做,因為如果每個都要這樣重復的判斷瀏覽器前綴,那也太惡心了瀏覽器是否支持全屏模式屬性返回一個布爾值,表示當前文檔是否可以切換到全屏狀態。
我第一次對網頁全屏模式有概念,是那種網頁播放視頻的全屏播 放的那種。感覺很強,前幾個星期有個需求也是關于全屏模式的,接觸之后才知道全屏模式并不神秘,是個很容易掌握的技能...
博客、前端積累文檔、公眾號、GitHubCodePen Demo
地址:演示、code
進去看看,玩一下,本文將結合這個demo一起進行講解。
全屏功能封裝在一個類里面:我把全屏模式封裝在一個類里面,在代碼中有詳細的注釋,如果有需要的話,直接把類拿出來,根據栗子和注釋使用即可。
代碼在codepen的demo里。
何謂全屏?MDN介紹:
使用提供的API,讓一個元素與其子元素,可以占據整個屏幕,并在此期間,從屏幕上隱藏所有的瀏覽器用戶界面以及其他應用。
chrome下的全屏表現:
全屏會隱藏標簽欄,書簽欄
如果網頁一開始不是全部撐開的形式,全屏下,也會將要全屏的元素充滿整個屏幕
可以多層全屏,如栗子中一樣,可以先左邊全屏,然后紅色全屏。
在這種情況下退出全屏,只會退出紅色全屏,退回到左邊全屏的形式,所以頁面依然是全屏模式。
進入全屏時,有一個默認的提示:"按esc即可退出全屏模式",如下圖顯示:
當按Esc或調用退出全屏方法,退出全屏。標簽欄和書簽欄依然是隱藏的,網頁上的元素恢復成原本的尺寸。
要顯示書簽欄和標簽欄,需要刷新一下頁面。
全屏API:總共用到6個API:
瀏覽器是否支持全屏模式:document.fullscreenEnabled
使元素進入全屏模式:Element.requestFullscreen()
退出全屏:document.exitFullscreen()
檢查當前是否有節點處于全屏狀態:document.fullscreenElement
進入全屏/離開全屏,觸發事件:document.fullscreenchange
無法進入全屏時觸發: document.fullscreenerror
瀏覽器前綴:目前并不是所有的瀏覽器都實現了API的無前綴版本,所以我們需要針對不同瀏覽器,做一下API的兼容:
這是我在demo中做的瀏覽器兼容:
/** * @description: 是否支持全屏+判斷瀏覽器前綴 * @param {Function} fn 不支持全屏的回調函數 這里設了一個默認值 */ isFullscreen(fn) { let fullscreenEnabled; // 判斷瀏覽器前綴 if (document.fullscreenEnabled) { fullscreenEnabled = document.fullscreenEnabled; } else if (document.webkitFullscreenEnabled) { fullscreenEnabled = document.webkitFullscreenEnabled; this.prefixName = "webkit"; } else if (document.mozFullScreenEnabled) { fullscreenEnabled = document.mozFullScreenEnabled; this.prefixName = "moz"; } else if (document.msFullscreenEnabled) { fullscreenEnabled = document.msFullscreenEnabled; this.prefixName = "ms"; } if (!fullscreenEnabled) { if (fn !== undefined) fn(); // 執行不支持全屏的回調 this.isFullscreenData = false; } }
我在實例化的時候進行一次判斷瀏覽器是否支持全屏,然后保存瀏覽器前綴。
推薦這么做,因為如果每個API都要這樣重復的判斷瀏覽器前綴,那也太惡心了!
1. 瀏覽器是否支持全屏模式:document.fullscreenEnableddocument.fullscreenEnabled屬性返回一個布爾值,表示當前文檔是否可以切換到全屏狀態。
代碼在上方瀏覽器前綴代碼中給出了。
如果沒有保存瀏覽器前綴的話,注意做一下不同瀏覽器前綴的兼容!下面不再強調。
2. 使元素進入全屏模式:Element.requestFullscreen()/** * @description: 將傳進來的元素全屏 * @param {String} domName 要全屏的dom名稱 */ Fullscreen(domName) { const element = document.querySelector(domName); // 獲取dom const methodName = this.prefixName === "" ? "requestFullscreen" : `${this.prefixName}RequestFullScreen`; // API前綴 element[methodName](); // 調用全屏 }
這就是我們實現全屏的API,是不是超簡單?
值得注意的是:調用此API并不能保證元素一定能夠進入全屏模式
MDN:例如 元素具有 allowfullscreen 屬性,可選擇是否將其內容以全屏模式顯示
這種不被允許全屏的元素屬于極少數情況,我試過可以將button全屏。
全屏請求必須在事件處理函數(點擊事件等)中調用,否則將會被拒絕。
在demo中有演示,初始化直接全屏,會觸發進入全屏失敗回調。
3. 退出全屏:document.exitFullscreen()介紹:
exitFullscreen() { const methodName = this.prefixName === "" ? "exitFullscreen" : `${this.prefixName}ExitFullscreen`; // API 前綴 document[methodName](); // 調用 }
調用這個方法會讓文檔回退到上一個調用Element.requestFullscreen()方法進入全屏模式之前的狀態。
多層全屏
像demo中,先進入左邊全屏,再進入紅色全屏,即為:多層全屏的情況(雖然這種情況并不多)。
當出現多層全屏的情況,需要一層層的退出到頁面最初始的情況,并不是調用一次document.exitFullscreen()就恢復到頁面最初始的樣子。
4. 檢查當前是否有節點處于全屏狀態:document.fullscreenElementfullscreenElement屬性返回正處于全屏狀態的Element節點,如果當前沒有節點處于全屏狀態,則返回null
/** * @description: 檢測有沒有元素處于全屏狀態 * @return 布爾值 */ isElementFullScreen() { const fullscreenElement = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; // 有前綴的f是大寫,沒前綴是小寫 if (fullscreenElement === null) { return false; // 當前沒有元素在全屏狀態 } else { return true; // 有元素在全屏狀態 } }
事實上,還有一個屬性document.fullscreen,返回一個布爾值,表示文檔是否處于全屏模式。
兩個方法效果是一樣,但因為IE不支持這個屬性,所以這里用的是document.fullscreenElement
5. 進入全屏/離開全屏,觸發事件:document.fullscreenchange當我們進入全屏和離開全屏的時候,都會觸發一個fullscreenchange事件。
MDN注意:此事件不會提供任何信息,表明是進入全屏或退出全屏。
看了好久事件返回的信息,確實找不到一個值,表明這是在進入全屏,或者離開全屏!
可以說相當不人性化了!但我們可以通過檢查當前是否有節點處于全屏狀態,判斷當前是否處于全屏模式。
/** * @description: 監聽進入/離開全屏 * @param {Function} enter 進入全屏的回調 * @param {Function} quit 離開全屏的回調 */ screenChange(enter,quit) { if (!this.isFullscreenData) return; const methodName = `on${this.prefixName}fullscreenchange`; document[methodName] = e => { if (this.isElementFullScreen()) { enter && enter(e); // 進入全屏回調 } else { quit && quit(e); // 離開全屏的回調 } }; }
注意:多層全屏的情況
先進入左邊全屏(進入全屏回調),再進入紅色全屏(進入全屏回調)
退出全屏,此時退出紅色全屏,左邊仍是全屏(觸發進入全屏回調)
出現這種情況,可以在點擊按鈕的時候,做一些狀態限制?;蛘吒鶕潦录祷氐膁om信息來進行判斷。
6. 無法進入全屏時觸發: document.fullscreenerror進入全屏并不總是成功的,可能是技術原因,也可能是用戶拒絕,我們在上文進入全文的APIElement.requestFullscreen()部分講過了。
比如全屏請求不是在事件處理函數中調用,會在這里攔截到錯誤
/** * @description: 瀏覽器無法進入全屏時觸發 * @param {Function} enterErrorFn 回調 */ screenError(enterErrorFn) { const methodName = `on${this.prefixName}fullscreenerror`; document[methodName] = e => { enterErrorFn && enterErrorFn(e) }; }Css: 全屏模式下的樣式
chorme 70 下的默認會為正在全屏的dom添加兩個class:稍微看一下
默認設置黑色背景
:not(:root):-webkit-full-screen::backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: black; // 會將背景設為黑色的 如果你沒為你的dom設置背景的話,全屏下會為黑色 }
默認樣式:
:not(:root):-webkit-full-screen { object-fit: contain; position: fixed !important; top: 0px !important; right: 0px !important; bottom: 0px !important; left: 0px !important; box-sizing: border-box !important; min-width: 0px !important; max-width: none !important; min-height: 0px !important; max-height: none !important; width: 100% !important; height: 100% !important; transform: none !important; margin: 0px !important; }
全屏狀態的CSS:
全屏狀態下,大多數瀏覽器的CSS支持:full-screen偽類,只有IE11支持:fullscreen偽類。使用這個偽類,可以對全屏狀態設置多帶帶的CSS屬性。
以下css摘自阮一峰老師的Fullscreen API:全屏操作
/* 針對dom的全屏設置 */ .div:-webkit-full-screen { background: #fff; } /* 全屏屬性 */ :-webkit-full-screen {} :-moz-full-screen {} :-ms-fullscreen {} /* 全屏偽類 當前chrome:70 不支持 */ :full-screen { } :fullscreen { /* IE11支持 */ }結語
我們可以把全屏技術應用在H5游戲、信息流網站、視頻等地方,下次再有全屏需求時,記住不要慌,回頭看看過本文的栗子,把我封裝的類拿出來直接用就可以啦!
希望看完的朋友可以點個喜歡/關注,您的支持是對我最大的鼓勵。博客、前端積累文檔、公眾號、GitHub
以上2018.12.1
參考資料:
Fullscreen API:全屏操作
MDN
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99650.html
摘要:一個完成入門篇二搭建主框架通過第一課的學習,你已經掌握了如何通過調試器來跟上的設計器聯調來實時查看設計效果調試代碼了,接下來通過一系列的開發教學你將很快上手學習到如何開發一個真正的。 一個App完成入門篇(二)-搭建主框架 通過第一課的學習,你已經掌握了如何通過debug調試器來跟PC上的設計器聯調來實時查看UI設計效果、調試代碼了,接下來通過一系列的demo開發教學你將很快上手學習到...
摘要:一個完成入門篇二搭建主框架通過第一課的學習,你已經掌握了如何通過調試器來跟上的設計器聯調來實時查看設計效果調試代碼了,接下來通過一系列的開發教學你將很快上手學習到如何開發一個真正的。 一個App完成入門篇(二)-搭建主框架 通過第一課的學習,你已經掌握了如何通過debug調試器來跟PC上的設計器聯調來實時查看UI設計效果、調試代碼了,接下來通過一系列的demo開發教學你將很快上手學習到...
摘要:一個完成入門篇二搭建主框架通過第一課的學習,你已經掌握了如何通過調試器來跟上的設計器聯調來實時查看設計效果調試代碼了,接下來通過一系列的開發教學你將很快上手學習到如何開發一個真正的。 一個App完成入門篇(二)-搭建主框架 通過第一課的學習,你已經掌握了如何通過debug調試器來跟PC上的設計器聯調來實時查看UI設計效果、調試代碼了,接下來通過一系列的demo開發教學你將很快上手學習到...
摘要:前言在日常開發中總是和各種打交道,我們名為前端工程師實為調用工程師。使用上面的截圖是微信網頁版的消息提示。代碼很簡單微信網頁版微信網頁版微信全屏定義這個可以使你所打開的頁面全屏展示,沒有其他頁面外的內容展示在屏幕上。 前言 在日常開發中總是和各種 API 打交道,我們名為前端工程師實為 API 調用工程師。這篇文章我就分享 8 個有趣的 API,你若通過閱讀這篇文章對前端增加一點點的樂...
閱讀 2287·2021-11-10 11:35
閱讀 899·2021-09-26 09:55
閱讀 2388·2021-09-22 15:22
閱讀 2318·2021-09-22 15:17
閱讀 3683·2021-09-09 09:33
閱讀 1821·2019-08-30 11:22
閱讀 970·2019-08-30 10:57
閱讀 641·2019-08-29 16:10