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;
}
上面代码只是实现了简单的防作弊功能，更完善的功能需要用数据库记录可退出全屏次数，在这里我就不写代码了。
————————————————
版权声明：本文为CSDN博主「旭东怪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38974638/article/details/104751139
