<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<button type="button" id="startTest">开始考试</button>
<button type="button" id="endTheTest">结束考试</button>
<!-- 防作弊代码相关 -->
<script>
// 开始考试进入全屏模式
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 交卷时退出全屏
function exitFullscreen () {
if (document.exitFullscreen) {
document.exitFullscreen();//W3C
}else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();//FIREFOX
}else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();//CHROME
}else if(document.msExitFullscreen){
document.msExitFullscreen();//MSIE
}else if(document.oRequestFullscreen){
document.oCancelFullScreen();
}
}
// 检测是否全屏
function checkFull() {
var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
if (fullScreen === undefined) {fullScreen = false;}
return fullScreen;
}
$(function(){
// 开始考试时,进入全屏状态
$('#startTest').click(function(){
launchFullscreen(document.documentElement);
})
// 交卷时,退出全屏
$('#endTheTest').click(function(){
exitFullscreen(document.documentElement);
})
// 浏览器类型
var fullscreenchangeList = ['fullscreenchange','mozfullscreenchange','webkitfullscreenchange','MSFullscreenChange']
// 根据不同浏览器类型,为document添加事件监听
fullscreenchangeList.forEach(function(ele){
document.addEventListener(ele, function () {
if (!checkFull()) {
alert("退出全屏")
}
}, false);
})
})
</script>
在线考试开启全屏
最新推荐文章于 2024-06-20 15:00:08 发布