元素全屏的设置与监听

Posted 2020-10-15

作者网站：http://hawkzz.com

设置全屏和退出全屏

 //全屏设置
    $('#fullScreen').on('click', function () {
        fullScreen();
    });
 //退出全屏
    $('#exitFullScreen').on('click', function () {
        exitFullScreen();
    });
 //进入全屏
function fullScreen() {
    var obj = document.getElementById('editMark');
    if (obj.requestFullScreen) {
        obj.requestFullScreen();
    } else if (obj.webkitRequestFullScreen) {
        obj.webkitRequestFullScreen();
    } else if (obj.msRequestFullScreen) {
        obj.msRequestFullScreen();
    } else if (obj.mozRequestFullScreen) {
        obj.mozRequestFullScreen();
    }
}

function exitFullScreen() {
    var obj = document.getElementById('editMark');
    if (document.exitFullscree) {
        document.exitFullscree();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
}

监听全屏事件

//监听全屏
    document.addEventListener('fullscreenchange', function () {
        if (document.fullscreenElement) {
          alert(1);
        } else {
          alert(2);
        }
    }, false);
    document.addEventListener('msfullscreenchange', function () {
        if (document.msFullscreenElement) {
           alert(1);
        } else {
           alert(2);
        }
    }, false);
    document.addEventListener('mozfullscreenchange', function () {
        if (document.mozFullScreen) {
            alert(1);
        } else {
            alert(2);
        }
    }, false);
    document.addEventListener('webkitfullscreenchange', function () {
        if (document.webkitIsFullScreen) {
           alert(1);
        } else {
             alert(2);
        }
    }, false);