考试防刷新、切屏效果实现

情景

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

实现

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

考试防刷新、切屏效果实现

情景

实现

猜你喜欢