JS 如何判断当前页面是否全屏
//监听全屏事件触发fullscreenchange() {let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;if (isFullScreen) {//进入全屏} else {//退出全屏}...
·
点击事件
<span class="iconfont icon-quanping1" @click="fullscreenchange"></span>
js 代码
fullscreenchange() {
// fullScreen 被弃用
// const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement
// 最新写法
const isFullScreen = document.fullscreenElement
if (isFullScreen) {
console.log('退出全屏')
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
}
} else {
var fullscreen = this.$refs.fullscreen // 需要全屏的元素
console.log('进入全屏')
if (fullscreen.requestFullscreen) {
fullscreen.requestFullscreen()
} else if (fullscreen.mozRequestFullScreen) {
fullscreen.mozRequestFullScreen()
} else if (fullscreen.webkitRequestFullscreen) {
fullscreen.webkitRequestFullscreen()
} else if (fullscreen.msRequestFullscreen) {
fullscreen.msRequestFullscreen()
}
}
}
参考官网MDN 官网
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献2条内容
所有评论(0)