在线考试开启全屏_elementplus 考试-优快云博客

本文链接：https://blog.youkuaiyun.com/luyundesign/article/details/118722753

本文介绍了一种利用JavaScript实现的在线考试系统，通过`requestFullscreen`等API实现考试期间的全屏模式，并在交卷时退出全屏，同时监控全屏状态防止作弊。技术涉及前端按钮操作、全屏API和浏览器事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>