js uses full screen to prevent cheating

        When I was writing the online examination system, there was an anti-cheating function that required full screen. I checked some online methods, and then I will talk about how I use full screen in the anti-cheating function.

1. Full screen

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);
        }
    }
}

2. Exit full screen

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();
    }
}

3. Anti-cheating function

  Implementation ideas:

1. Enter the interface, the document is bound to the mouse click (onclick) event

2. The onclick event calls showFullScreen () to enter the full screen

3. Use the lastFullScreenFlag variable to mark whether the full screen before the onresize event occurs, true means full screen

Note: During the test, it is found that pressing the F12 key when not in the full screen state will trigger the onsize event to call the code in the if. So the lastFullScreenFlag variable tag is used to call if only if you exit the full screen.

4, the window (window) binding window adjustment (onresize) event monitoring window changes

5. checkFull () to judge whether it is full screen

6. There are only 3 opportunities to quit the full screen, and you will not be able to quit the full screen after 3 opportunities are used up

var exitFullscreenNum=3;
var lastFullScreenFlag=false;
document.οnclick=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;
}  

The above code only implements a simple anti-cheating function. For a more complete function, you need to use the database to record the number of times that you can exit the full screen. I will not write the code here.