allowfullscreen
an HTML attribute for the iframe tag

What events are triggered when entering or exiting fullscreen mode?

Answers:

  • When entering or exiting fullscreen mode in web applications or certain software, various events can be triggered, depending on the platform and context. In the realm of web applications, the following events are particularly relevant:

    Web Context (JavaScript/HTML5):

    1. Fullscreen Change Events:
      • fullscreenchange: This event is fired on the document when the fullscreen state changes. You can handle this event to take action when entering or exiting fullscreen mode.
      • webkitfullscreenchange: This is a vendor-prefixed version for support in older versions of WebKit browsers.
      • mozfullscreenchange: This is a vendor-prefixed version for Firefox.
      • msfullscreenchange: This is for Internet Explorer and older Edge versions.

    Example of Handling Fullscreen Change:

    document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
        console.log('Entered fullscreen mode');
    } else {
        console.log('Exited fullscreen mode');
    }
});

// Add vendor-prefixed events if necessary
document.addEventListener('webkitfullscreenchange', ...);
document.addEventListener('mozfullscreenchange', ...);
document.addEventListener('msfullscreenchange', ...);

    Other Related Events:

    • resize: When entering or exiting fullscreen mode, the window size may change, triggering the resize event. You may want to listen for this to adjust your layout accordingly.
    • orientationchange: On mobile devices, entering or exiting fullscreen may trigger an orientation change if the device is tilted.

    Non-Web Context:

    In other software environments, such as desktop applications or games, entering and exiting fullscreen may trigger different events depending on the framework used (e.g., WPF, Unity, etc.). Generally, you would follow similar principles—listening for lifecycle events or state changes.

    Summary

    When managing fullscreen operations in web environments, focus on the fullscreenchange event and associated vendor-prefixed variants. For broader applications, additional events like resize and orientationchange may also be of interest.

Related Questions: