React应用全屏模式被F11或关闭键退出后无法自动恢复的问题求助

Hey there, let's figure out why your auto-restore fullscreen logic isn't working and fix it up!

The core issue with your current approach is that you're tracking screenfull.isEnabled (which only tells us if the browser supports the fullscreen API) instead of the actual active fullscreen state. Plus, relying solely on a useState initial value won't catch state changes triggered by user actions like pressing F11 or clicking the fullscreen close button—you need to listen to screenfull's native events for that.

Here's a reliable solution that addresses these gaps:

import { useState, useEffect } from 'react';
import screenfull from 'screenfull';

function FullScreenApp() {
  // Track the actual fullscreen state, not just API support
  const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen);

  useEffect(() => {
    // Handle fullscreen state changes from any trigger
    const handleFullscreenChange = () => {
      setIsFullscreen(screenfull.isFullscreen);
      
      // Auto-restore fullscreen if we've exited and the API is supported
      if (!screenfull.isFullscreen && screenfull.isEnabled) {
        // Small delay to avoid conflicting with browser's native exit action
        setTimeout(() => {
          screenfull.request();
        }, 100);
      }
    };

    // Attach the event listener only if fullscreen is supported
    if (screenfull.isEnabled) {
      screenfull.on('change', handleFullscreenChange);
    }

    // Clean up the listener when the component unmounts
    return () => {
      if (screenfull.isEnabled) {
        screenfull.off('change', handleFullscreenChange);
      }
    };
  }, []);

  const onClickButton = () => {
    if (screenfull.isEnabled) {
      screenfull.request();
    }
  };

  return (
    <div>
      <button onClick={onClickButton}>Enter Fullscreen</button>
    </div>
  );
}

export default FullScreenApp;

Key Improvements Explained: #

• Track actual fullscreen state: We use screenfull.isFullscreen (which reflects whether we're currently in fullscreen) instead of isEnabled (which only checks API support).
• Listen to native change events: The change event from screenfull captures all fullscreen state changes—whether initiated by your button, the F11 key, or the fullscreen close button.
• Delay auto-restore: The 100ms timeout ensures we don't clash with the browser's native fullscreen exit process, making the request() call more reliable.
• Clean up listeners: We remove the event listener when the component unmounts to prevent memory leaks.

Quick Browser Behavior Note: #

Some browsers restrict automatic fullscreen requests unless they're tied to a prior user interaction. Since your users will already have clicked the fullscreen button once, this auto-restore should work in most major browsers—but it's worth testing across Chrome, Firefox, and Safari to confirm.

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