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

Category: Javascript , Recommended | August 6, 2020
Author:sindresorhus
Views Total:101 views
Official Page:Go to website
Last Update:August 6, 2020
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 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
}

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');
  });
}

Changelog:

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