考试防刷新切屏效果实现

Posted 2021-02-14 miku561

情景

       在线考试模块这样一个需求: 避免学生用电脑查答案, 需要系统防止刷新、切屏或改变窗口大小，当达到次数后自动交卷。

实现

 1，仿刷新。

　   因为浏览器都自带了刷新返回等按钮，因此只想到了弹出窗口的形式。

/*
 * @param url 考试界面的链接 
 * @param name 新窗口的名称，没有可填空
 * 属性menubar=no 新窗口隐藏菜单栏，防刷新即基本实现
 */

window.open( url, name, "menubar=no" ) 

没那么完美，鼠标点刷新按钮是实现了，但键盘快捷键的刷新未处理。接下来在防止切屏内一并处理。

 

2，防止切屏。 

         主要思路是屏蔽键盘快捷键和鼠标切换。

　     2.1，屏蔽切换组合键如下：

function stopShortCutKey() {               //屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键  
  if ( (window.event.altKey) && ((window.event.keyCode == 37) ||   (window.event.keyCode == 39) ) ) { 
    alert("不准你使用ALT+方向键前进或后退网页！");
    event.returnValue = false;
  }
  if ((event.keyCode == 116) ||                                   //屏蔽   F5   刷新键  
      (event.keyCode == 112) ||                                   //屏蔽   F1   刷新键  
      (event.ctrlKey && event.keyCode == 82)) {                   //Ctrl   +   R  
       event.keyCode = 0;
       event.returnValue = false;
  }
  if ((event.ctrlKey) && (event.keyCode == 78)){
    event.returnValue = false;      //屏蔽   Ctrl+n  
  } 

  if ((event.shiftKey) && (event.keyCode == 121)) {  //屏蔽   shift+F10  
    event.returnValue = false;
  }
  if (window.event.srcElement.tagName == "A" && window.event.shiftKey){
    window.event.returnValue = false;        //屏蔽   shift 加鼠标左键新开一网页  
  }
  if ((window.event.altKey) && (window.event.keyCode == 115)) {   //屏蔽Alt+F4  
    window.showModelessDialog("about:blank", "", "dialogWidth:1px;dialogheight:1px");
    return false;
  }
  if ((window.event.altkey) && (window.event.keyCode == 27)) { 
    alert("认真答题！"); 
  }
} 

      2.2 "屏蔽"鼠标切屏

      window系统上，win + tab 组合键属于系统级别的快捷键，无法操作。我想到了监听网页失焦事件。

var allowNum = 3; // 允许三次切屏，超过则提交
window.onblur = function() {
　　if(allowNum < 1) {
　　　　submitTest()
　　}
　　allowNum--;
　　alert("您已切屏,超过三次自动提交试卷"）
}

3, 禁止窗口大小改变

　   监听窗口改变的事件如下，但由于它会默认触发onblur事件( 因为点击窗口按钮，已经在页面之外，无法监听了，所以失焦函数会触发），为防止两次触发切屏，故只用上面的函数进行监听。

window.onresize()