前端实现页面全屏效果
代码写的比较烂,大哥们别骂我
//全屏按钮
function fullScreen() {
var width = window.screen.width;
var height = window.screen.height;
//vue获取元素并给元素赋值
var video = this.$refs.backVideo; //vue用ref获取元素
video.style.width = width
video.style.height = height // 在进入全屏时改变Dom的宽高
//jq获取元素并给元素赋值
var video = $('#backVideo')[0];
$("#backVideo").css({ //在进入全屏时改变Dom的宽高
'width': width,
'height': height
});
//调用开启全屏方法
launchFullscreen(video);
}
//点击开启全屏
function launchFullscreen(element) {
//此方法不可以在異步任務中執行,否則火狐無法全屏
if(element.RequestFullScreen) {//element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式,可查阅MDN web文档
element.RequestFullScreen();
} else if (element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if(element.oRequestFullscreen) {
element.oRequestFullscreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
} else {
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
var width = window.screen.width;
var height = window.screen.height;
var cssText = "width:" + width + ";height:" + height + ";overflow:hidden;";
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
document.IsFullScreen = true;
}
}
//点击退出全屏
function exitFull() {
var video = $('#backVideo')[0];
$("#backVideo").css({
'width': videoStyle.width,//在点击进入全屏前需记录原先的宽高,这里赋值后再退出全屏
'height': videoStyle.height
});
//调用退出全屏方法
exitFullscreen();
}
//退出全屏
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.oRequestFullscreen) {
document.oCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}
//判断是否处于全屏状态
function checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
if(isFull === undefined) isFull = false;
return isFull;
}
window.onresize = function(){
if(!vm.checkFull()){
vm.exitFull();//要执行的函数
}
}