考試防刷新、切屏效果實現
阿新 • • 發佈：2019-03-06
效果 考試 答案 size 未處理 防刷 tab 方向鍵 sub
情景
在線考試模塊這樣一個需求: 避免學生用電腦查答案, 需要系統防止刷新、切屏或改變窗口大小，當達到次數後自動交卷。
實現
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()
考試防刷新、切屏效果實現