Simple JavaScript Plugin To Make Html Elements Fullscreen – screenfull.js

Category: Javascript , Recommended | June 19, 2022
Author:sindresorhus
Views Total:329 views
Official Page:Go to website
Last Update:June 19, 2022
License:MIT

Preview:

Simple JavaScript Plugin To Make Html Elements Fullscreen – screenfull.js

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

You Might Be Interested In:


Leave a Reply