{"id":13206,"library":"fullscreen-api-polyfill","title":"Fullscreen API Polyfill","description":"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.","status":"maintenance","version":"1.1.2","language":"javascript","source_language":"en","source_url":"https://neovov@github.com/neovov/Fullscreen-API-Polyfill","tags":["javascript","fullscreen","polyfill","w3c"],"install":[{"cmd":"npm install fullscreen-api-polyfill","lang":"bash","label":"npm"},{"cmd":"yarn add fullscreen-api-polyfill","lang":"bash","label":"yarn"},{"cmd":"pnpm add fullscreen-api-polyfill","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"import { requestFullscreen } from 'fullscreen-api-polyfill';","symbol":"*","correct":"import 'fullscreen-api-polyfill';"},{"note":"After the polyfill is imported, use the standard W3C method directly on the element. The polyfill handles vendor prefixes internally.","wrong":"element.webkitRequestFullScreen();","symbol":"requestFullscreen","correct":"element.requestFullscreen();"},{"note":"After the polyfill is imported, the standard `document.fullscreenEnabled` property will be available and correctly reflect browser capabilities, regardless of vendor prefixes.","wrong":"document.webkitIsFullScreen;","symbol":"fullscreenEnabled","correct":"document.fullscreenEnabled;"}],"quickstart":{"code":"import 'fullscreen-api-polyfill';\n\nconst element = document.getElementById('my-element');\nconst enterFullscreenBtn = document.getElementById('enter-fullscreen');\nconst exitFullscreenBtn = document.getElementById('exit-fullscreen');\n\nif (enterFullscreenBtn && element) {\n  enterFullscreenBtn.addEventListener('click', async () => {\n    if (document.fullscreenEnabled) {\n      try {\n        await element.requestFullscreen();\n        console.log('Element entered fullscreen.');\n      } catch (error) {\n        console.error('Error entering fullscreen:', error);\n      }\n    } else {\n      console.log('Fullscreen is not enabled in this browser or context.');\n    }\n  });\n}\n\nif (exitFullscreenBtn) {\n  exitFullscreenBtn.addEventListener('click', async () => {\n    if (document.fullscreenElement) {\n      try {\n        await document.exitFullscreen();\n        console.log('Exited fullscreen.');\n      } catch (error) {\n        console.error('Error exiting fullscreen:', error);\n      }\n    }\n  });\n}\n\ndocument.addEventListener('fullscreenchange', () => {\n  console.log('Fullscreen change event. Current fullscreen element:', document.fullscreenElement);\n});\n\ndocument.addEventListener('fullscreenerror', (event) => {\n  console.error('Fullscreen error event:', event);\n});\n\n// To make this runnable in a browser environment, you'd need HTML:\n/*\n<div id=\"my-element\" style=\"background: lightblue; padding: 20px; width: 100%; height: 200px;\">\n  <h1>My Fullscreen Content</h1>\n  <button id=\"enter-fullscreen\">Enter Fullscreen</button>\n  <button id=\"exit-fullscreen\">Exit Fullscreen</button>\n</div>\n*/","lang":"javascript","description":"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."},"warnings":[{"fix":"Before relying on fullscreen functionality, check `document.fullscreenEnabled` to ensure the browser and context support it.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Regularly update the `fullscreen-api-polyfill` package to its latest version to ensure compatibility with evolving browser implementations and W3C spec changes.","message":"The 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always invoke `element.requestFullscreen()` or `document.exitFullscreen()` within a user interaction event listener, such as a `click` handler.","message":"Fullscreen 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`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"TypeError: element.requestFullscreen is not a function"},{"fix":"Always check `document.fullscreenElement` before calling `document.exitFullscreen()` to confirm an element is indeed in fullscreen mode.","cause":"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.","error":"Uncaught (in promise) DOMException: Document not in fullscreen"},{"fix":"Ensure `element.requestFullscreen()` is only called in response to a direct user interaction like a button click.","cause":"Commonly occurs when `requestFullscreen()` is attempted outside of a direct user gesture (e.g., a click event) due to browser security policies.","error":"Uncaught (in promise) DOMException: Fullscreen request was denied"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}