考试系统开发：如何使用JavaScript/JQuery阻止页面刷新以避免计时器重置？

Hey there! This is a super common (and critical) requirement for exam/testing applications—let’s break down the best ways to handle it, including both blocking accidental refreshes with prompts and adding robust fallback measures to protect user progress.

1. Pop-Up Prompt + Block Accidental Refreshes (Recommended) #

Directly blocking all refreshes is generally a bad idea (users might have legitimate reasons to leave, like an emergency). Instead, using the beforeunload event to show a confirmation prompt is the standard approach—it stops accidental refreshes while respecting the user’s final choice.

Here’s a working, cross-browser compatible code example:

// Wait for user interaction before enabling the prompt (avoids browser security blocks)
document.addEventListener('DOMContentLoaded', function() {
  const examInteractiveElements = document.querySelectorAll('.exam-question, .answer-input, .exam-button');
  
  // Enable the prompt after the user interacts with the exam
  function enableRefreshPrompt() {
    window.addEventListener('beforeunload', function(e) {
      // Cancel default browser behavior
      e.preventDefault();
      // Set returnValue for cross-browser support
      e.returnValue = 'Your exam progress and timer will reset if you refresh. Are you sure you want to leave?';
      // Return a string (required for older browser versions)
      return 'Your exam progress and timer will reset if you refresh. Are you sure you want to leave?';
    });
  }

  // Bind interaction events (trigger once)
  examInteractiveElements.forEach(el => {
    el.addEventListener('click', enableRefreshPrompt, { once: true });
    el.addEventListener('keydown', enableRefreshPrompt, { once: true });
  });
});

How this works: #

• When the user tries to refresh, close the tab, or navigate away, the browser shows a native confirmation dialog.
• If they select "Cancel", they stay on the exam page; if they select "OK", the page refreshes/closes as normal.
• We wait for user interaction before enabling the prompt to avoid browser security restrictions that block untriggered, intrusive prompts.

2. Directly Blocking Refresh Shortcuts (Partial Solution) #

While technically possible, directly blocking all refresh attempts is not user-friendly and can be bypassed (e.g., using the browser’s refresh button or Ctrl+Shift+R). That said, you can add this as a supplementary layer to catch keyboard-based refreshes:

document.addEventListener('keydown', function(e) {
  // Block Ctrl+R, F5, and Ctrl+Shift+R shortcuts
  if ((e.ctrlKey && e.key === 'r') || e.key === 'F5' || (e.ctrlKey && e.shiftKey && e.key === 'r')) {
    e.preventDefault();
    alert('Refreshing is disabled during your exam. Please complete the test before leaving.');
  }
});

⚠️ Important: This won’t block all refresh methods, so always pair it with the prompt + progress-saving approach above.

3. Robust Fallback: Auto-Save Exam Progress #

Even with prompts, users might still refresh accidentally. To prevent total progress loss, save the user’s answers and timer state to localStorage or your backend at regular intervals.

Example code for auto-saving:

// Assume these are your exam state variables
let userAnswers = {};
let remainingTime = 3600; // 1 hour in seconds
const currentExamId = 'math101_final_exam';

// Save progress to localStorage
function saveExamProgress() {
  const progressData = JSON.stringify({
    answers: userAnswers,
    remainingTime: remainingTime,
    lastSaved: new Date().toISOString()
  });
  localStorage.setItem(`exam_${currentExamId}_progress`, progressData);
}

// Auto-save every 30 seconds
setInterval(saveExamProgress, 30000);

// Restore progress when the page loads
window.addEventListener('load', function() {
  const savedProgress = localStorage.getItem(`exam_${currentExamId}_progress`);
  if (savedProgress) {
    const { answers, remainingTime: savedTime } = JSON.parse(savedProgress);
    userAnswers = answers;
    remainingTime = savedTime;
    // Update your UI with saved answers and restart the timer
    renderSavedAnswers();
    restartExamTimer(remainingTime);
  }
});

// Clear saved progress once the exam is completed
function submitExam() {
  localStorage.removeItem(`exam_${currentExamId}_progress`);
  // Submit exam data to your backend here...
}

This way, even if the page refreshes, the user can pick up right where they left off with their timer intact.

内容的提问来源于stack exchange，提问作者prabath shalitha