情景

在線考試模塊這樣一個需求: 避免學生用電腦查答案, 需要系統防止刷新、切屏或改變窗口大小，當達到次數后自動交卷。

實現

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+方向鍵前進或后退網頁！");
    return false;
  }
  if ((event.keyCode == 116) ||                                   //屏蔽   F5   刷新鍵  
      (event.keyCode == 112) ||                                   //屏蔽   F1   刷新鍵  
      (event.ctrlKey && event.keyCode == 82)) {                   //Ctrl   +   R  
       return false;
  }
  if ((event.ctrlKey) && (event.keyCode == 78)){
    return false;      //屏蔽   Ctrl+n  
  } 

  if ((event.shiftKey) && (event.keyCode == 121)) {  //屏蔽   shift+F10  
    return false;
  }
  if (window.event.srcElement.tagName == "A" && window.event.shiftKey){
    return 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()

總結

以上是生活随笔為你收集整理的考试防刷新、切屏效果实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。