最近公司的实验页面做功能升级,于是做了一些。
基础版本(版本一)
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
el.mozRequestFullScreen || el.msRequestFullscreen;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
}
}
function exitFullScreen() {
var el = document;
var cfs = el.cancelFullScreen || el.webkitExitFullscreen ||
el.mozCancelFullScreen || el.exitFullscreen || el.msExitFullscreen();
if(typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
}
高级版本(版本二)
judgeScreen() {
const fullScreenChange = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
let validScreen
fullScreenChange.map((value) => {
if (`on${value}` in document) {
validScreen = value
}
return true
})
document.addEventListener(validScreen, () => {
const fullscreenElement = document.fullscreenElement ||
document.mozFullScreenElement || document.webkitFullscreenElement
this.maxShow = Boolean(fullscreenElement)
})
},
changeScreen() {
if (this.maxShow) {
this.minScreen()
} else {
this.maxScreen()
}
},
maxScreen() {
const el = document.documentElement
const rfs = el.requestFullscreen || el.webkitRequestFullScreen ||
el.mozRequestFullScreen || el.msRequestFullscreen
if (typeof rfs !== 'undefined' && rfs) {
rfs.call(el)
this.maxShow = true
}
},
minScreen() {
const el = document
const cfs = el.cancelFullScreen || el.webkitExitFullscreen ||
el.mozCancelFullScreen || el.exitFullscreen || el.msExitFullscreen
if (typeof cfs !== 'undefined' && cfs) {
cfs.call(el)
this.maxShow = false
}
},
网友评论