一、全屏功能封装
// 进入全屏
function enter(ele) {
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(element.msExitFullScreen) {
element.msExitFullScreen()
}
}
//当前处于全屏的元素
function fullEle(){
return (
document.fullscreenElement ||
document.mozFullScreenElement ||
document.msFullScreenElement ||
document.webkitFullScreenElement ||
null
)
}
// 是否处于全屏
function isFull() {
return !!fullEle();
}
// 切换状态
function toggle(){
isFull() ? exit() : enter();
}
本次带来实现了一个简单的全屏切换功能封装，包括进入全屏、退出全屏、获取当前全屏元素、判断是否处于全屏状态以及切换全屏状态等功能。
-
进入全屏功能：
enter函数接受一个元素参数ele。- 根据不同的浏览器前缀，尝试调用对应的全屏请求方法，如
requestFullscreen、mozRequestFullScreen、webkitRequestFullScreen和msRequestFullScreen，以实现将指定元素全屏显示。
-
退出全屏功能：
exit函数不接受参数。- 同样根据不同的浏览器前缀，尝试调用对应的退出全屏方法，如
exitFullscreen、mozCancelFullScreen、webkitExitFullScreen和msExitFullScreen，以退出全屏状态。
-
获取当前全屏元素：
fullEle函数不接受参数。- 返回当前处于全屏状态的元素，如果没有全屏元素则返回
null。通过检查不同浏览器前缀下的全屏元素属性，如fullscreenElement、mozFullScreenElement、msFullScreenElement和webkitFullScreenElement来确定当前全屏元素。
-
判断是否处于全屏状态：
isFull函数不接受参数。- 调用
fullEle函数获取当前全屏元素，如果存在全屏元素则返回true，否则返回false。
-
切换全屏状态：
-
toggle函数不接受参数。 -
调用
isFull函数判断当前是否处于全屏状态，如果是则调用exit函数退出全屏，否则调用enter函数进入全屏。
-
这个全屏功能封装可以方便地在网页中实现全屏切换操作，通过简单地调用这些函数，可以轻松地控制页面的全屏显示状态。
