Author: | sindresorhus |
---|---|
Views Total: | 250 views |
Official Page: | Go to website |
Last Update: | June 19, 2022 |
License: | MIT |
Preview:

Description:
screenfull.js is a vanilla JavaScript library to bring any HTML elements into fullscreen by using the JavaScript Fullscreen API. Works with all the modern browsers like IE7/8/9/10, Chrome, Firefox, Safari and more.
Basic Usage:
Install and download.
# NPM $ npm install screenfull --save
Import the screenfull.js in your document.
<script src="dist/screenfull.min.js"></script>
Make the page or an element fullscreen.
if (screenfull.isEnabled) { screenfull.request(element); } else { // do something }
Hide navigation UI on mobile devices.
if (screenfull.isEnabled) { screenfull.request(element, {navigationUI: 'hide'}); }
Exit the fullscreen mode.
screenfull.exit().then(function () { console.log('Browser exited fullscreen mode') });
Toggle the fullscreen mode.
if (screenfull.isEnabled) { screenfull.toggle(event.target); }
Event handlers.
if (screenfull.isEnabled) { screenfull.on('error', event => { console.error('Failed to enable fullscreen', event); }); } if (screenfull.isEnabled) { screenfull.on('change', () => { console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No'); }); }
Pass FullscreenOptions to the screenfull.request
function.
screenfull.request(element, options);
Changelog:
v6.0.2 (06/19/2022)
- Support running in server environments
v6.0.1 (01/16/2022)
- Fix .isEnabled TypeScript type
v6.0.0 (11/03/2020)
- This package is now pure ESM.If you cannot easily move to ESM. Just stay on version 5.2.0. It’s stable and fine.
- This package now uses modern JavaScript syntax. If you need support for older browsers, you need to transpire the code with Babel.
- A minified version is no longer provided in the package. It’s better to minify your project as a whole in your own build step.
- screenfull.element is now undefined instead of null when there’s no fullscreen element.
v5.1.0 (12/24/2020)
- Add support for options
v5.0.2 (08/06/2020)
- Rename screenfull.enabled to screenfull.isEnabled
- Drop Safari 5.1 (it’s ancient) workaround
- Unify checking for fullscreen availability
- Previously, you had to check if (screenfull && screenfull.enabled) {} before using it. Now you just use if (screenfull.isEnabled) {}.
v5.0.0 (09/09/2019)
- Return the native promise when it exists
v4.2.1 (07/31/2019)
- Properly forward promise rejections
v4.1.0 (03/29/2019)
- Bugfix