绑定事件与获取全屏元素
$('#fullscreen').click(function () {
let elem = document.getElementById("warp"); // 需要全屏的HTML元素
requestFullScreen(elem);
});
判断浏览器是否全屏
function isFullscreen () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false
}
全屏与取消全屏
let fullscreen = false;
function requestFullScreen() {
let element = document.getElementById('warp');
// let element = document.documentElement
if (fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen()
}
}
fullscreen = !fullscreen
}