JavaScript Document exitFullscreen() Method

What You’ll Learn

document.exitFullscreen() is an instance method that asks the browser to leave fullscreen mode (see MDN Document: exitFullscreen()). Learn its Promise return, how it pairs with Element.requestFullscreen() and fullscreenElement, fullscreenchange events, feature detection, and five try-it labs.

Introduction

Fullscreen mode fills the screen with one element — often a video player, slideshow, or game canvas. You enter with element.requestFullscreen(). To leave from script, call document.exitFullscreen().

MDN: this method requests that the element currently presented in fullscreen be taken out of fullscreen, restoring the previous screen state. It usually reverses a previous requestFullscreen() call.

Related tutorials: fullscreenElement, fullscreenEnabled, fullscreen (deprecated).

Understanding document.exitFullscreen()

An instance method on the page’s document object (Fullscreen API; MDN).

• Parameters — none (MDN).
• Return value — a Promise that resolves when exiting finishes (MDN).
• Errors — if exiting fails, the promise rejects; handle with catch() (MDN).
• Pair — enter with Element.requestFullscreen(); exit with this method.
• Status check — read document.fullscreenElement (or listen for fullscreenchange).
• User exit — Esc / system UI can also leave fullscreen without your call.

📝 Syntax

General form of Document.exitFullscreen (MDN):

exitFullscreen()

Parameters

None (MDN).

Return value

A Promise resolved once the user agent has finished exiting fullscreen. On failure, use the promise’s catch() handler (MDN).

MDN toggle example

document.onclick = (event) => {
  if (document.fullscreenElement) {
    document
      .exitFullscreen()
      .then(() => console.log("Document Exited from Full screen mode"))
      .catch((err) => console.error(err));
  } else {
    document.documentElement.requestFullscreen();
  }
};

MDN notes a more complete demo lives with Element.requestFullscreen() examples. Entering fullscreen normally needs a user gesture (click / tap).

⚖️ Fullscreen API pieces

Examples Gallery

Examples follow MDN Document: exitFullscreen() and practical Fullscreen API patterns. Embedded try-it frames may block fullscreen — open labs in a full tab when testing enter/exit.

document.onclick = () => {
  if (document.fullscreenElement) {
    document
      .exitFullscreen()
      .then(() => console.log("Document Exited from Full screen mode"))
      .catch((err) => console.error(err));
  } else {
    document.documentElement.requestFullscreen();
  }
};

Document Exited from Full screen mode
(after a second click while fullscreen)

async function leaveFullscreen() {
  if (!document.fullscreenElement) {
    console.log("not in fullscreen");
    return;
  }
  await document.exitFullscreen();
  console.log("exited");
}

document.getElementById("exit").addEventListener("click", () => {
  leaveFullscreen().catch((err) => console.error(err));
});

not in fullscreen
(or "exited" after a successful leave)

function exitNow() {
  if (!document.fullscreenElement) {
    console.log("skip — already windowed");
    return;
  }
  document
    .exitFullscreen()
    .then(() => console.log("exit finished"))
    .catch((err) => console.error("exit failed:", err));
}

skip — already windowed
(or "exit finished" / an error message)

const status = document.getElementById("status");

function updateStatus() {
  status.textContent = document.fullscreenElement
    ? "fullscreen: " + document.fullscreenElement.tagName
    : "windowed";
}

document.addEventListener("fullscreenchange", updateStatus);
updateStatus();

document.getElementById("exit").addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen().catch(console.error);
  }
});

windowed
(or "fullscreen: DIV" while active)

const canExit = typeof document.exitFullscreen === "function";
const canEnter =
  typeof Element !== "undefined" &&
  typeof Element.prototype.requestFullscreen === "function";
const enabled = document.fullscreenEnabled === true;

console.log({ canExit, canEnter, enabled });

{ canExit: true, canEnter: true, enabled: true }
(values depend on browser / iframe permissions)

🚀 Common Use Cases

• Video players — Exit button next to Enter fullscreen.
• Presentations / slides — Leave deck fullscreen from a toolbar.
• Games / canvases — Return to windowed mode from a pause menu.
• Toggle controls — One button that enters or exits based on fullscreenElement.
• Cleanup — Exit before navigating away or closing a modal experience.
• Not Esc replacement only — Users can still leave with Esc; keep UI event-driven.

📝 Notes

• MDN: Limited availability (not Baseline) — feature-detect in production.
• MDN: no parameters; returns a Promise.
• Usually reverses Element.requestFullscreen() (MDN).
• Prefer fullscreenElement over deprecated document.fullscreen.
• Iframes / permissions may block fullscreen even when the method exists.
• Related: fullscreenElement, fullscreenEnabled, execCommand().

💡 Best Practices