進(jìn)入全屏
function request(ele = document.body) {
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
}
退出全屏
function exit() {
if(document.exitFullScreen) {
document.exitFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
}
獲取當(dāng)前全屏的節(jié)點(diǎn)
function fullscreenElement() {
return (
document.fullscreenElement ||
document.mozFullScreenElement ||
document.msFullScreenElement ||
document.webkitFullscreenElement ||
null
);
}
判斷當(dāng)前是否全屏
function isFullScreen() {
return !! (
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
);
}
判斷當(dāng)前文檔是否能切換到全屏
function isEnabled() {
return (
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled
);
}
全屏事件
document.addEventListener('fullscreenchange', evt => {
if (document.fullscreenElement) {
console.log('進(jìn)入全屏')
} else {
console.log('退出全屏')
}
})
注:
document下沒有requestFullscreenrequestFullscreen方法只能由用戶觸發(fā)贷币，比如：在onload事件中不能觸發(fā)- 頁(yè)面跳轉(zhuǎn)需先退出全屏
- 進(jìn)入全屏的元素，將脫離其父元素亏狰，所以可能導(dǎo)致之前某些css的失效
解決方案：使用:full-screen偽類 為元素添加全屏?xí)r的樣式（使用時(shí)為了兼容注意添加-webkit役纹、-moz或-ms前綴）- 一個(gè)元素A全屏后，其子元素要再全屏暇唾，需先讓元素A退出全屏
- iframe 引入時(shí)要添加
allowfullscreen="true"屬性
