js 使用全屏实现防作弊

        我在写在线考试系统的时候，有一个防作弊功能需要用到全屏，我通过查了一些网上的方法，接下来讲讲我是怎么将全屏用在防作弊功能里面。

一、全屏

function showFullScreen(){
    lastFullScreenFlag=true;//如果不需要实现防作弊功能，请注释此行
    if (!document.fullscreenElement &&!document.mozFullScreenElement 
    && !document.webkitFullscreenElement &&!document.msFullscreenElement) { 
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    }
}

二、退出全屏

function closeFullScreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

三、防作弊功能实现

  实现思路：

1、进入界面，document绑定鼠标点击（onclick）事件

2、onclick事件调用showFullScreen()，进入全屏

3、用lastFullScreenFlag变量标记onresize事件发生之前是否全屏，true代表全屏

注：测试时发现不处于全屏状态按F12键会触发onsize事件调用if里面的代码。所以采用lastFullScreenFlag变量标记只有退出全屏才能调用if。

4、窗口（window）绑定窗口调整（onresize）事件监听窗口变化

5、checkFull()判断是否全屏

6、只有3次退出全屏的机会，3次机会用完将不能退出全屏

var exitFullscreenNum=3;
var lastFullScreenFlag=false;
document.onclick=function(){
    showFullScreen();
}
window.onresize = function() {
    var currentFullScreenFlag=checkFull();
    if (lastFullScreenFlag&&!currentFullScreenFlag) {
        exitFullscreenNum--;
        if(exitFullscreenNum>=0){
            alert("你还有"+(exitFullscreenNum)+"次退出全屏的机会！");
            lastFullScreenFlag=false;
        }
        else{
            alert("你已经不能退出全屏！");
            showFullScreen();
        }
    }
}
//判断是否全屏
function checkFull() {
    var isFull = false;
    if (document.fullscreenEnabled || document.msFullscreenEnabled ) {
        isFull = window.fullScreen || document.webkitIsFullScreen;
        if (isFull === undefined) {
            isFull = false;
        }
    }
    return isFull;
}  

上面代码只是实现了简单的防作弊功能，更完善的功能需要用数据库记录可退出全屏次数，在这里我就不写代码了。