PDFPageElement: toggleFullscreen() method

Syntax

toggleFullscreen()
toggleFullscreen(force)

Parameters

force Optional

A boolean value: true enters fullscreen, false leaves it. Without it, the page toggles.

Return value

A Promise that resolves to true when the page entered or left fullscreen as asked, and to false when the browser refused or fullscreen is unavailable.

Exceptions

None: a refusal resolves to false instead of rejecting.

Usage notes

• Browsers only allow fullscreen from a user gesture, such as a click or a key press, and in an <iframe> only with allow=fullscreen.
• On a page with controls, F and F11 toggle fullscreen, the bar has a ⛶ button, and Esc leaves.
• break=fullscreen turns fullscreen off: the method then resolves to false.
• Style a fullscreen page with pdf-page:fullscreen and its background with pdf-page::backdrop.

Examples

A fullscreen button

HTML

<pdf-file id=f src=//pdf.ist/web.pdf></pdf-file>
<button type=button>Fullscreen</button>
<pdf-page of=f id=page scale=0.3></pdf-page>

CSS

button { display: block; margin-bottom: 1rem; }

JavaScript

const page = document.querySelector("#page");
document.querySelector("button").addEventListener("click", async () => {
  const ok = await page.toggleFullscreen(true);
  if (!ok) console.log("Fullscreen is not available here.");
});

Result

Specifications

Not part of any specification. <pdf-file> and <pdf-page> are autonomous custom elements defined by WebPDF.pro. It implements:

Browser compatibility

See also

• PDFPageElement.fullscreen
• Element.requestFullscreen()
• Viewer controls