元素全屏的設置與監聽

作者網站：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);