Registry / web-framework / fullscreen-api-polyfill

fullscreen-api-polyfill

library1.1.2jsnpmunverified

The `fullscreen-api-polyfill` package provides a robust polyfill for the W3C Fullscreen API, abstracting away various vendor-prefixed implementations like `mozRequestFullScreen` and `webkitRequestFullScreen`. It enables developers to use the standard `element.requestFullscreen()`, `document.exitFullscreen()`, and access properties such as `document.fullscreenEnabled` and `document.fullscreenElement`, as well as event listeners for `fullscreenchange` and `fullscreenerror`, without needing to write extensive browser-specific conditional logic. The current stable version is `1.1.2`. As a polyfill for a web standard that has largely matured, its release cadence is likely low, focusing on maintaining compatibility and addressing any remaining browser inconsistencies rather than introducing new features. Its primary differentiation is the simplification of cross-browser fullscreen implementation down to a single, standard W3C syntax.

web-framework

npm install fullscreen-api-polyfill

github ↗package ↗

INSTALL

IMPORT

SIG · FULLSCREEN-API-POL

fullscreen-api-polyfill

web-frameworkjavascriptv1.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

✓ import 'fullscreen-api-polyfill';

✗ import { requestFullscreen } from 'fullscreen-api-polyfill';

This package is a global polyfill that modifies `Element.prototype` and `Document.prototype`. It is imported for its side effects; no named exports are provided. Ensure this import is executed early in your application lifecycle.

requestFullscreen

✓ element.requestFullscreen();

✗ element.webkitRequestFullScreen();

After the polyfill is imported, use the standard W3C method directly on the element. The polyfill handles vendor prefixes internally.

fullscreenEnabled

✓ document.fullscreenEnabled;

✗ document.webkitIsFullScreen;

After the polyfill is imported, the standard `document.fullscreenEnabled` property will be available and correctly reflect browser capabilities, regardless of vendor prefixes.

This quickstart demonstrates how to use the `fullscreen-api-polyfill` to enter and exit fullscreen mode, and listen for related events, ensuring cross-browser compatibility with the standard W3C API methods.

import 'fullscreen-api-polyfill'; const element = document.getElementById('my-element'); const enterFullscreenBtn = document.getElementById('enter-fullscreen'); const exitFullscreenBtn = document.getElementById('exit-fullscreen'); if (enterFullscreenBtn && element) { enterFullscreenBtn.addEventListener('click', async () => { if (document.fullscreenEnabled) { try { await element.requestFullscreen(); console.log('Element entered fullscreen.'); } catch (error) { console.error('Error entering fullscreen:', error); } } else { console.log('Fullscreen is not enabled in this browser or context.'); } }); } if (exitFullscreenBtn) { exitFullscreenBtn.addEventListener('click', async () => { if (document.fullscreenElement) { try { await document.exitFullscreen(); console.log('Exited fullscreen.'); } catch (error) { console.error('Error exiting fullscreen:', error); } } }); } document.addEventListener('fullscreenchange', () => { console.log('Fullscreen change event. Current fullscreen element:', document.fullscreenElement); }); document.addEventListener('fullscreenerror', (event) => { console.error('Fullscreen error event:', event); }); // To make this runnable in a browser environment, you'd need HTML: /* <div id="my-element" style="background: lightblue; padding: 20px; width: 100%; height: 200px;"> <h1>My Fullscreen Content</h1> <button id="enter-fullscreen">Enter Fullscreen</button> <button id="exit-fullscreen">Exit Fullscreen</button> </div> */

Debug

Known issues

gotchaThe polyfill only wraps existing vendor-prefixed APIs; it does not simulate fullscreen functionality from scratch. If a browser does not support *any* native (prefixed or W3C) Fullscreen API, this polyfill will not magically enable it.

fix

Before relying on fullscreen functionality, check `document.fullscreenEnabled` to ensure the browser and context support it.

affects: >=1.0.0

breakingThe Fullscreen API specification itself is subject to change across browser versions. While this polyfill aims to abstract prefixes, future spec changes might require updates to the polyfill or your code.

fix

Regularly update the `fullscreen-api-polyfill` package to its latest version to ensure compatibility with evolving browser implementations and W3C spec changes.

affects: >=1.0.0

gotcha`requestFullscreen()` and `exitFullscreen()` methods return a Promise, but only if the browser environment natively supports Promises. In older browsers without Promise support, attempting to use `async/await` or `.then()` directly on these methods might lead to errors or unexpected behavior.

fix

If targeting environments without native Promise support, include a Promise polyfill (e.g., `core-js` or `es6-promise`) before importing `fullscreen-api-polyfill` if you intend to use the Promise-based return values.

affects: >=1.0.0

gotchaFullscreen requests must be initiated by a direct user gesture (e.g., a click event). Attempting to call `requestFullscreen()` outside of a user-initiated event handler will likely result in a `DOMException` or `SecurityError`.

fix

Always invoke `element.requestFullscreen()` or `document.exitFullscreen()` within a user interaction event listener, such as a `click` handler.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: element.requestFullscreen is not a function

The `fullscreen-api-polyfill` script was either not loaded/imported, or it was loaded after the code attempting to call `requestFullscreen` was executed, or the browser lacks any underlying fullscreen API for the polyfill to wrap.

fix

Ensure `import 'fullscreen-api-polyfill';` is at the very top of your application's entry point. Verify that the browser being used has at least a prefixed fullscreen API implementation.

Uncaught (in promise) DOMException: Document not in fullscreen

This error occurs when `document.exitFullscreen()` is called, but no element is currently in fullscreen mode. It's often a logical error rather than a polyfill issue.

fix

Always check `document.fullscreenElement` before calling `document.exitFullscreen()` to confirm an element is indeed in fullscreen mode.

Uncaught (in promise) DOMException: Fullscreen request was denied

Commonly occurs when `requestFullscreen()` is attempted outside of a direct user gesture (e.g., a click event) due to browser security policies.

fix

Ensure `element.requestFullscreen()` is only called in response to a direct user interaction like a button click.

Upgrade

Version history

1.1.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/neovov/Fullscreen-API-Polyfill ↗

packagehttps://www.npmjs.com/package/fullscreen-api-polyfill ↗