Entering and Exiting Browser Fullscreen Mode

Overview

Browser fullscreen is a common way to focus on content. Most browsers support page fullscreen and provide shortcuts, usually F11 and Esc. The W3C Fullscreen API also lets you control fullscreen with JavaScript.

Fullscreen API

W3C standard methods:

• Enter fullscreen: Element.requestFullscreen
• Exit fullscreen: Document.exitFullscreen
• Element in fullscreen: Document.fullscreenElement

Some browser versions require prefixed APIs:

Feature	webkit	Gecko (Firefox)	IE11
Enter fullscreen	webkitRequestFullScreen	mozRequestFullScreen	msRequestFullScreen
Exit fullscreen	webkitExitFullscreen	mozCancelFullScreen	msExitFullscreen
Fullscreen element	webkitFullscreenElement or (webkitCurrentFullScreenElement, mobile Safari)	mozFullScreenElement	msFullscreenElement

Support varies across browsers, so use compatibility wrappers when needed.

Compatibility wrappers

Enter fullscreen

function requestFullscreen() {
    const html = document.documentElement;
    const rfs = html.requestFullscreen || html.mozRequestFullScreen || html.webkitRequestFullScreen || html.msRequestFullscreen;
    return rfs.call(html);
}

Exit fullscreen

function exitFullscreen() {
    const efs = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
    return efs.call(document);
}

Get the fullscreen element

function getFullscreenElement() {
    return document.fullscreenElement || document.webkitFullscreenElement || document.webkitCurrentFullScreenElement || document.mozFullScreenElement || document.msFullscreenElement;
}

Detect fullscreen

Document.fullscreen is deprecated. Per MDN, check whether Document.fullscreenElement is null:

function isFullscreen() {
    return getFullscreenElement() !== null;
}

Per Can I use, prefixed fullscreenElement support is still uneven. For stricter compatibility, you can use the Screen API as a fallback:

function isFullscreen() {
    const fullscreenElement = getFullscreenElement();
    if (fullscreenElement === undefined) {
        return window.innerWidth === screen.availWidth && window.innerHeight === screen.availHeight;
    }
    return fullscreenElement !== null;
}

Event listeners

Entering or exiting fullscreen fires fullscreenchange. Non-standard variants include:

• webkitfullscreenchange
• mozfullscreenchange
• MSFullscreenChange

Per Can I use, fullscreenchange compatibility is limited. Foxit PDF SDK for Web provides UIEvents.fullscreenchange for broader coverage.

Example using addUIEventListener:

pdfui.addUIEventListener(UIExtension.UIEvents.fullscreenchange, isFullscreen => {
    // do something here
})

TIP

Before using UIEvents.fullscreenchange, load the full-screen addon when initializing PDFUI, or use AllInOne.js or AllInOne.mobile.js. See Addon overview.

Alternatively, listen to resize and compare isFullscreen() before and after (see Detect fullscreen above):

let _isFullscreen = isFullscreen(); // See "Detect fullscreen"
window.addEventListener('resize', () => {
    const currentIsFullscreen = isFullscreen();
    if (currentIsFullscreen !== _isFullscreen) {
        // Fullscreen entered or exited — same as fullscreenchange
    }
    _isFullscreen = currentIsFullscreen;
})

Both approaches let you react when fullscreen changes. Choose the one that fits your browser support requirements.