如何实现桌面端按钮模拟Chrome的F11与Firefox的F10按键功能？

Hey there! Let's build that desktop-only shortcut button you need—triggering F11 in Chrome and F10 in Firefox without manual key presses. Here's a solid, tested approach:

Step 1: Detect Browser & Desktop Environment #

First, we need reliable checks to identify Chrome, Firefox, and ensure we're on a desktop device (since you don't want this button showing up on mobile).

// Check if we're on Chrome
function isChrome() {
  return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
}

// Check if we're on Firefox (using a unique Firefox-only API)
function isFirefox() {
  return typeof InstallTrigger !== 'undefined';
}

// Check if we're on a desktop device
function isDesktop() {
  return !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

Step 2: Simulate the Keyboard Keypress #

Next, we'll create a function to simulate a full key press cycle (both keydown and keyup events—some browsers require both to recognize the shortcut):

function simulateKeyPress(keyCode) {
  // Dispatch keydown event
  const keydownEvent = new KeyboardEvent('keydown', {
    keyCode: keyCode,
    bubbles: true,
    cancelable: true,
    view: window
  });
  document.dispatchEvent(keydownEvent);

  // Dispatch keyup event to complete the press
  const keyupEvent = new KeyboardEvent('keyup', {
    keyCode: keyCode,
    bubbles: true,
    cancelable: true,
    view: window
  });
  document.dispatchEvent(keyupEvent);
}

Step 3: Build the Button & Wire Up Logic #

Now let's create the button, hide it by default on mobile, and link it to our browser-specific logic:

<!-- Button hidden by default (we'll show it only on desktop) -->
<button id="shortcutButton" style="padding: 10px 20px; display: none;">Trigger Shortcut</button>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const shortcutBtn = document.getElementById('shortcutButton');

  // Show the button only if we're on desktop
  if (isDesktop()) {
    shortcutBtn.style.display = 'block';
  }

  // Handle button clicks
  shortcutBtn.addEventListener('click', () => {
    if (isChrome()) {
      simulateKeyPress(122); // F11 key code (fullscreen)
    } else if (isFirefox()) {
      simulateKeyPress(121); // F10 key code (menu bar toggle)
    }
    // Add a fallback here if you want to support other browsers!
  });
});
</script>

Key Notes to Keep in Mind #

• Browser Security Restrictions: Some browsers might block simulated system shortcuts (like F11 fullscreen) if the page is in an iframe or has strict security settings. Test this on a top-level page for best results.
• Fallback for Chrome Fullscreen: If simulating F11 doesn't work reliably, you can use the native Fullscreen API as a backup:

  function toggleFullscreen() {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().catch(err => {
        console.log(`Fullscreen error: ${err.message}`);
      });
    } else {
      document.exitFullscreen();
    }
  }
  

  Just call this function instead of simulateKeyPress(122) in the Chrome branch if needed.
• User Agent Limitations: While UA detection works for most cases, browsers can modify their user agent strings. Test on recent versions of Chrome and Firefox to confirm.

内容的提问来源于stack exchange，提问作者Mohammad Hady Karimi