在Vue中监控浏览器全屏模式切换与退出事件
最编程
2024-02-21 20:53:28
...
mounted() {
this.listenfullscreen(this.setScreen); // 监听全屏
},
methods: {
setScreen(){
// 这里做全屏打开关闭的逻辑处理
},
/**
* 监听全屏
*/
listenfullscreen (callback) => {
function listen() {
callback();
}
document.addEventListener("fullscreenchange", function () {
listen();
});
document.addEventListener("mozfullscreenchange", function () {
listen();
});
document.addEventListener("webkitfullscreenchange", function () {
listen();
});
document.addEventListener("msfullscreenchange", function () {
listen();
});
};
},
/**
* 浏览器判断是否全屏
*/
fullscreenEnable () {
var isFullscreen =
document.isFullScreen ||
document.mozIsFullScreen ||
document.webkitIsFullScreen;
return isFullscreen;
};
/**
* 浏览器全屏
*/
reqFullScreen () {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
}
};
/**
* 浏览器退出全屏
*/
exitFullScreen () {
if (document.documentElement.requestFullScreen) {
document.exitFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.webkitCancelFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.mozCancelFullScreen();
}
};