使用 JavaScript 进入/退出全屏模式

//点击后判断当前屏幕状态，并做相应处理
$(document).on("click", "#zoom-btn", function () {
    if (document.fullscreenElement === null) {
        console.log("当前不处于全屏模式");
        handleFullScreen()
    } else {
        console.log("当前处于全屏模式");
        exitFullscreen()
    }
})

//监听屏幕变化，在变化后做一些其它处理
document.addEventListener("fullscreenchange", function() {
    if (document.fullscreenElement) {
        console.log("进入全屏模式");
        $("#zoom-btn").attr("src", "/zoom.png")
    } else {
        console.log("退出全屏模式");
        $("#zoom-btn").attr("src", "/zoom-out.png")
    }
});

function handleFullScreen() {
    let de =  document.getElementById("full-container");
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.msRequestFullscreen) {// IE/Edge
        de.msRequestFullscreen();
    } else if (de.webkitRequestFullScreen) {// Chrome, Safari and Opera
        de.webkitRequestFullScreen();
    } else if (de.mozRequestFullScreen) {// Firefox
        de.mozRequestFullScreen();
    } else {
        console.log("当前浏览器不支持全屏！");
    }
}

function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {// IE/Edge
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {// Firefox
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {// Chrome, Safari and Opera
        document.webkitExitFullscreen();
    }
}