付老师版:
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 {
// 非全屏状态
}
}