实现全屏
个人版：
function isFullScreen() {
var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;
if (fullscreenElement) {
//退出全屏
if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.exitFullscreen) {
document.exitFullscreen();
}else if (document.msRequestFullscreen) {
document.msRequestFullscreen();
}
}else {
//全屏
launchFullScreen();
}
};
//封装函数，控制全屏
function launchFullScreen() {
var element = document.documentElement;
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
};
/**
* 监听全屏状态变化
*/
document.addEventListener('fullscreenchange', Fn);
document.addEventListener('webkitfullscreenchange', Fn);
document.addEventListener('mozfullscreenchange', Fn);
document.addEventListener('msfullscreenchange', Fn);
function Fn() {
var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;
//全屏按钮切换类
if (fullscreenElement) {
//目前全屏
}else {
//目前不是全屏
}
}
付老师版：
full.onclick=function() {
if(isFullScreen) {
isFullScreen = false
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
isFullScreen = true
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
}
}
/**
* 监听全屏状态变化
*/
document.addEventListener('fullscreenchange', fullScreenChangeFn);
document.addEventListener('webkitfullscreenchange', fullScreenChangeFn);
document.addEventListener('mozfullscreenchange', fullScreenChangeFn);
document.addEventListener('msfullscreenchange', fullScreenChangeFn); // IE下无效果然
/**
* 监听屏幕变化的函数
*/
function fullScreenChangeFn(){
/*
* 获取被全屏的元素，没有返回null
* document.fullscreenElement
* document.webkitFullscreenElement
* document.mozFullScreenElement
*
* 返回是否全屏·布尔值
* document.webkitIsFullScreen
* document.mozFullScreen
* */
// 判断是否是全屏
var isFull = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;
if (isFull) {
// 全屏状态
} else {
// 非全屏状态
}
}