HTML Element exitFullscreen() Method: Exiting Fullscreen Mode

Table of Contents

HTML Element `exitFullscreen()` Method: Exiting Fullscreen Mode

The exitFullscreen() method in the HTML DOM API is used to programmatically exit fullscreen mode in a web browser. This method allows you to provide a user-friendly way to return from fullscreen view, enhancing the user experience of web applications, especially those involving videos, games, or presentations.

Understanding the `exitFullscreen()` Method

The exitFullscreen() method is part of the Fullscreen API, which provides a standardized way to control fullscreen behavior on web pages. Unlike requesting fullscreen (using element.requestFullscreen()), exitFullscreen() is called on the document object and not on a specific element. This is because exiting fullscreen is a document-level operation.

Syntax

The syntax for using the exitFullscreen() method is straightforward:

document.exitFullscreen();

Note: The exitFullscreen() method does not take any parameters. Its purpose is simply to instruct the browser to exit fullscreen mode if it is currently active. 💡

Practical Examples

Let’s explore several practical examples to demonstrate the usage of the exitFullscreen() method.

Basic Example: Exiting Fullscreen with a Button

This example demonstrates how to create a button that, when clicked, exits fullscreen mode.

<!DOCTYPE html>
<html>
  <head>
    <title>Exit Fullscreen Example</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="exitFullscreenButton">Exit Fullscreen</button>

    <script>
      const exitFullscreenButtonEl = document.getElementById(
        "exitFullscreenButton"
      );

      exitFullscreenButtonEl.addEventListener("click", () => {
        if (document.fullscreenElement) {
          document
            .exitFullscreen()
            .then(() => console.log("Exited Fullscreen"))
            .catch((err) => console.error("Error exiting fullscreen:", err));
        } else {
          alert("Not in Fullscreen Mode");
        }
      });
    </script>
  </body>
</html>

In this example, a button with the ID exitFullscreenButton is created. When the button is clicked, an event listener checks if the document is currently in fullscreen mode (document.fullscreenElement). If it is, the document.exitFullscreen() method is called to exit fullscreen mode.

Conditional Exit: Checking for Fullscreen Before Exiting

It’s good practice to check if the document is currently in fullscreen mode before attempting to exit it. This prevents unnecessary errors and ensures the code behaves as expected.

<!DOCTYPE html>
<html>
  <head>
    <title>Conditional Exit Fullscreen</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="conditionalExitButton">Exit Fullscreen (If Active)</button>

    <script>
      const conditionalExitButtonEl = document.getElementById(
        "conditionalExitButton"
      );

      conditionalExitButtonEl.addEventListener("click", () => {
        if (document.fullscreenElement) {
          document
            .exitFullscreen()
            .then(() => console.log("Exited Fullscreen"))
            .catch((err) => console.error("Error exiting fullscreen:", err));
        } else {
          alert("Not in Fullscreen Mode");
        }
      });
    </script>
  </body>
</html>

This example is similar to the first one, but it includes an additional check using document.fullscreenElement to ensure that the browser is actually in fullscreen mode before attempting to exit it.

Exiting Fullscreen After a Delay

In some cases, you might want to exit fullscreen mode after a certain period. This can be achieved using setTimeout().

<!DOCTYPE html>
<html>
  <head>
    <title>Exit Fullscreen After Delay</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="delayExitButton">Exit Fullscreen in 5 Seconds</button>

    <script>
      const delayExitButtonEl = document.getElementById("delayExitButton");

      delayExitButtonEl.addEventListener("click", () => {
        // Request fullscreen first (for demonstration purposes)
        document.documentElement.requestFullscreen();

        setTimeout(() => {
          if (document.fullscreenElement) {
            document
              .exitFullscreen()
              .then(() => console.log("Exited Fullscreen after delay"))
              .catch((err) => console.error("Error exiting fullscreen:", err));
          } else {
            alert("Not in Fullscreen Mode");
          }
        }, 5000); // 5000 milliseconds = 5 seconds
      });
    </script>
  </body>
</html>

In this example, clicking the button first requests fullscreen mode (for demonstration purposes), and then sets a timer using setTimeout() to exit fullscreen mode after 5 seconds.

Exiting Fullscreen on a Specific Event

You can also exit fullscreen mode based on a specific event, such as pressing the Escape key.

<!DOCTYPE html>
<html>
  <head>
    <title>Exit Fullscreen on Escape</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="escapeExitButton">Request Fullscreen (Press ESC to Exit)</button>

    <script>
      const escapeExitButtonEl = document.getElementById("escapeExitButton");

      escapeExitButtonEl.addEventListener("click", () => {
        document.documentElement.requestFullscreen();
      });

      document.addEventListener("keydown", (event) => {
        if (event.key === "Escape" || event.keyCode === 27) {
          if (document.fullscreenElement) {
            document
              .exitFullscreen()
              .then(() => console.log("Exited Fullscreen on ESC"))
              .catch((err) => console.error("Error exiting fullscreen:", err));
          }
        }
      });
    </script>
  </body>
</html>

In this example, an event listener is added to the document to listen for keydown events. When the Escape key is pressed (key code 27), the code checks if the document is in fullscreen mode and, if so, exits fullscreen mode.

Exiting Fullscreen with Promises

The exitFullscreen() method returns a Promise that resolves when the browser successfully exits fullscreen mode. You can use this Promise to handle asynchronous operations.

<!DOCTYPE html>
<html>
  <head>
    <title>Exit Fullscreen with Promise</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="promiseExitButton">Exit Fullscreen with Promise</button>

    <script>
      const promiseExitButtonEl = document.getElementById("promiseExitButton");

      promiseExitButtonEl.addEventListener("click", () => {
        if (document.fullscreenElement) {
          document
            .exitFullscreen()
            .then(() => {
              console.log("Fullscreen exited successfully");
              // Perform any additional operations after exiting fullscreen
            })
            .catch((error) => {
              console.error("Failed to exit fullscreen:", error);
              // Handle any errors that occurred while exiting fullscreen
            });
        } else {
          console.log("Not in fullscreen mode");
        }
      });
    </script>
  </body>
</html>

In this example, the exitFullscreen() method’s Promise is used to log a success message when fullscreen mode is exited, and to handle any errors that might occur during the process.

Browser Support

The Fullscreen API, including the exitFullscreen() method, is widely supported across modern browsers. Here’s a summary:

Chrome: Supported
Firefox: Supported
Safari: Supported
Edge: Supported
Opera: Supported
Internet Explorer: Supported (version 11+)

However, it is always good practice to use vendor prefixes for maximum compatibility:

function exitFullscreenHandler() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen(); // Firefox
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen(); // Chrome, Safari and Opera
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen(); // IE/Edge
  }
}

Tips and Considerations

User Experience: Ensure that users have a clear and intuitive way to exit fullscreen mode. A button or a key press (like Escape) are common solutions.
Error Handling: Always include error handling to gracefully manage cases where exiting fullscreen mode fails.
Asynchronous Operations: Remember that exitFullscreen() is an asynchronous operation. Use Promises to handle any post-exit tasks.
Vendor Prefixes: For maximum compatibility, consider using vendor prefixes.

Conclusion

The exitFullscreen() method is a vital part of the Fullscreen API, allowing you to programmatically exit fullscreen mode in web applications. By understanding its syntax, practical applications, and browser support, you can create more engaging and user-friendly web experiences. Whether it’s exiting a video player or a full-screen game, the exitFullscreen() method provides the control you need. 🚀