1,前言
发现了一个很好用的全屏API,是HTML5自带的方法,记录一下
2,兼容性
3,API介绍
Document.exitFullscreen()
,用于让当前文档退出全屏模式
Element.requestFullscreen()
,用于发出异步请求使元素进入全屏模式
不仅如此,浏览器的伪类:fullscreen
,应用于当前处于全屏显示模式的元素,它不仅仅选择顶级元素,还包括所有已显示的栈内元素。
语法
#fullscreen:fullscreen {
background-color: pink;
}
4,具体方法
changeFullScreen() {
const element = document.documentElement
// 如果是全屏状态
if (this.fullscreen) {
// 如果浏览器有这个Function
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
} else {
// 如果浏览器有这个Function
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
}
// 判断全屏状态的变量
this.fullscreen = !this.fullscreen
}
如果看了觉得有帮助的,我是@鹏多多i,欢迎 点赞 关注 评论;
END
公众号
往期文章
- javaScript中try和catch的使用和跳出forEach循环
- 细数JS中实用且强大的操作符&运算符
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
个人主页