Safari浏览器ESC按键问题及代码优化咨询

Hey there! Let's break down why your current code is causing repeated page refreshes (and thus triggering your server's brute-force protection) in Safari, and walk through a better approach.

What's Likely Going Wrong #

Your original code is probably falling into one of these traps:

• Not blocking Safari's default ESC behavior: Safari has native actions tied to the ESC key (like exiting fullscreen or resetting form inputs) that might conflict with your custom navigation, leading to unintended extra page loads.
• Binding the event listener multiple times: If the listener gets attached repeatedly (e.g., in component mount/unmount cycles for SPAs), pressing ESC will fire the navigation logic several times in quick succession, flooding your server with requests.
• Using unreliable navigation methods: location.href or location.reload() can sometimes cause unexpected reload loops, especially if the page doesn't redirect immediately.

Optimized Solution #

Here's a robust, Safari-friendly implementation that avoids repeated requests:

// Bind the event listener ONCE to prevent duplicate triggers
document.addEventListener('keydown', function handleEscNavigation(e) {
  // Check for both standard 'Escape' and legacy 'Esc' key values
  if (e.key === 'Escape' || e.key === 'Esc') {
    // Block Safari's default ESC behavior to avoid conflicts
    e.preventDefault();
    e.stopPropagation();

    // Use replace() instead of href to avoid adding a history entry
    // This ensures a single, clean redirect without reload loops
    window.location.replace('/dashboard');

    // Optional: Unbind the listener immediately after use to prevent accidental repeats
    document.removeEventListener('keydown', handleEscNavigation);
  }
}, { once: true }); // The `once` option guarantees the listener runs only once

Key Improvements Explained #

• { once: true }: This ensures the event listener is automatically removed after the first trigger, so even if your code accidentally binds it multiple times, it won't fire repeatedly.
• e.preventDefault() + e.stopPropagation(): Stops Safari from executing any native ESC-related actions that could interfere with your redirect.
• location.replace(): Replaces the current page in the browser's history instead of adding a new entry. This prevents users from accidentally navigating back to the previous page, and more importantly, it triggers a single redirect request (no reload loops).

Extra Tips for SPAs #

If you're working in a Single-Page Application (React, Vue, etc.), use your framework's router methods instead of native location to avoid full page reloads entirely:

• React Router: navigate('/dashboard', { replace: true })
• Vue Router: router.replace('/dashboard')

These methods handle navigation client-side without hitting the server, eliminating the risk of triggering brute-force protection altogether.

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