理想：
| 類型 | 名稱 | 作用 |
|---|---|---|
| 屬性 | fullscreenElement | 當(dāng)前處于全屏模式的DOM元素 |
| 屬性 | fullscreenEnabled | 當(dāng)前 document 是否進(jìn)入了可以請求全屏模式的狀態(tài) |
| 方法 | requestFullscreen() | 請求進(jìn)入全屏模式 |
| 方法 | exitFullscreen() | 退出全屏模式 |
| 事件 | fullscreenchange | 進(jìn)入/退出全屏模式切換時(shí)會(huì)觸發(fā) |
| 事件 | fullscreenerror | 進(jìn)入/退出全屏模式失敗時(shí)會(huì)觸發(fā) |
現(xiàn)實(shí)：html5的全屏api處于一個(gè)雜亂狀態(tài)署辉，各個(gè)瀏覽器還是有著不同的實(shí)現(xiàn)方法
1.獲取當(dāng)前處于全屏模式的元素(注意screen的大小寫)，非全屏?xí)r為undefined
var ele=
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
2.當(dāng)前 document 是否進(jìn)入了可以請求全屏模式的狀態(tài)，我們常見的寫法如下，
注意下面寫法是錯(cuò)誤的！
var isFull =
document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;
原因，msFullscreenEnabled指的并不是瀏覽器是否處于全屏狀態(tài)木羹，引用微軟官方一句話
Returns true if a document lets elements be displayed in full-screen mode. Otherwise it returns false.
返回當(dāng)前元素是否可以已全屏展示
可以看出，它的作用并不是當(dāng)前元素“是否”處于全屏狀態(tài)解孙，而是是否有能力變成全屏坑填，所以判斷當(dāng)前是否全屏可以通過獲取當(dāng)前全屏元素來判斷
3.跨瀏覽器進(jìn)入全屏
function requestFullScreen(element) {
if (!element) {
element = document.body;
}
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
4.跨瀏覽器退出全屏
function exitFullScreen() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
4.全屏狀態(tài)變化事件監(jiān)聽
- fullscreenchange
- webkitfullscreenchange
- mozfullscreenchange
- MSFullscreenChange
5.全屏error事件監(jiān)聽
- fullscreenerror
- webkitfullscreenerror
- mozfullscreenerror
- MSFullscreenError
6.關(guān)于樣式
chrome：元素居中
其他：
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
可通過以下方式覆蓋樣式
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
最后上一個(gè)demo鏈接
https://laincarl.github.io/demos/fullscreen/
