PHPackages                             gaomingcode/screenfull.js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. gaomingcode/screenfull.js

ActiveLibrary

gaomingcode/screenfull.js
=========================

5.1.0(4y ago)011MITJavaScript

Since Jun 19Pushed 4y agoCompare

[ Source](https://github.com/gaomingcode/screenfull.js)[ Packagist](https://packagist.org/packages/gaomingcode/screenfull.js)[ RSS](/packages/gaomingcode-screenfulljs/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)DependenciesVersions (1)Used By (0)

screenfull.js
=============

[](#screenfulljs)

[![GitHub Version](https://camo.githubusercontent.com/2e27a10dbe9993a9e589c1e106eeaf7f09465d0c5758978644043498f975d3f5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f67616f6d696e67636f64652f73637265656e66756c6c2e6a732e737667)](https://github.com/gaomingcode/screenfull.js)[![Packagist Downloads](https://camo.githubusercontent.com/7cc1805f39275d55412aaba3f11b0b6285668a45110235abe9a6792957a259d4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f67616f6d696e67636f64652f73637265656e66756c6c2e6a73)](https://github.com/gaomingcode/screenfull.js)[![Github License](https://camo.githubusercontent.com/5c0a1fdaea4511f7c373c7ce3ecb97f94fe0f486ed350da8b0428ccfba0772ab/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f67616f6d696e67636f64652f73637265656e66756c6c2e6a73)](https://github.com/gaomingcode/screenfull.js)

Installation
------------

[](#installation)

### Composer

[](#composer)

```
composer require gaomingcode/screenfull.js

```

ReadMe from Origin
------------------

[](#readme-from-origin)

> Simple wrapper for cross-browser usage of the JavaScript [Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode), which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.

**[Not supported on iPhone](#support)**

**This package is feature complete. No new features will be accepted.**

#### [Demo](https://sindresorhus.com/screenfull.js)

[](#demo)

Install
-------

[](#install)

Only 0.7 kB gzipped.

Download the [production version](https://github.com/sindresorhus/screenfull.js/raw/main/dist/screenfull.min.js) or the [development version](https://github.com/sindresorhus/screenfull.js/raw/main/dist/screenfull.js).

```
$ npm install screenfull

```

Also available on [cdnjs](https://cdnjs.com/libraries/screenfull.js).

Why?
----

[](#why)

### Screenfull

[](#screenfull)

```
if (screenfull.isEnabled) {
	screenfull.request();
}
```

### Vanilla JavaScript

[](#vanilla-javascript)

```
document.fullscreenEnabled =
	document.fullscreenEnabled ||
	document.mozFullScreenEnabled ||
	document.documentElement.webkitRequestFullScreen;

function requestFullscreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} else if (element.webkitRequestFullScreen) {
		element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
	}
}

if (document.fullscreenEnabled) {
	requestFullscreen(document.documentElement);
}

// This is not even entirely comprehensive. There's more.
```

Support
-------

[](#support)

[Supported browsers](https://caniuse.com/#feat=fullscreen)

**Note:** In order to use this package in Internet Explorer, you need a [`Promise` polyfill](https://github.com/stefanpenner/es6-promise).

**Note:** Safari is supported on desktop and iPad, but not on iPhone. This is a limitation in the browser, not in Screenfull.

Documentation
-------------

[](#documentation)

### Examples

[](#examples)

#### Fullscreen the page

[](#fullscreen-the-page)

```
document.getElementById('button').addEventListener('click', () => {
	if (screenfull.isEnabled) {
		screenfull.request();
	} else {
		// Ignore or do something else
	}
});
```

#### Fullscreen an element

[](#fullscreen-an-element)

```
const element = document.getElementById('target');

document.getElementById('button').addEventListener('click', () => {
	if (screenfull.isEnabled) {
		screenfull.request(element);
	}
});
```

#### Hide navigation user-interface on mobile devices

[](#hide-navigation-user-interface-on-mobile-devices)

```
const element = document.getElementById('target');

document.getElementById('button').addEventListener('click', () => {
	if (screenfull.isEnabled) {
		screenfull.request(element, {navigationUI: 'hide'});
	}
});
```

#### Fullscreen an element with jQuery

[](#fullscreen-an-element-with-jquery)

```
const element = $('#target')[0]; // Get DOM element from jQuery collection

$('#button').on('click', () => {
	if (screenfull.isEnabled) {
		screenfull.request(element);
	}
});
```

#### Toggle fullscreen on a image with jQuery

[](#toggle-fullscreen-on-a-image-with-jquery)

```
$('img').on('click', event => {
	if (screenfull.isEnabled) {
		screenfull.toggle(event.target);
	}
});
```

#### Detect fullscreen change

[](#detect-fullscreen-change)

```
if (screenfull.isEnabled) {
	screenfull.on('change', () => {
		console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
	});
}
```

Remove listeners with:

```
screenfull.off('change', callback);
```

#### Detect fullscreen error

[](#detect-fullscreen-error)

```
if (screenfull.isEnabled) {
	screenfull.on('error', event => {
		console.error('Failed to enable fullscreen', event);
	});
}
```

See the [demo](https://sindresorhus.com/screenfull.js) for more examples, and view the source.

#### Fullscreen an element with Angular.js

[](#fullscreen-an-element-with-angularjs)

You can use the [Angular.js binding](https://github.com/hrajchert/angular-screenfull) to do something like:

```

	This is a fullscreen element
	Toggle fullscreen

```

#### Fullscreen the page with Angular 2

[](#fullscreen-the-page-with-angular-2)

```
import {Directive, HostListener} from '@angular/core';
import screenfull = require('screenfull');

@Directive({
	selector: '[toggleFullscreen]'
})
export class ToggleFullscreenDirective {
	@HostListener('click') onClick() {
		if (screenfull.isEnabled) {
			screenfull.toggle();
		}
	}
}
```

```
Toggle fullscreen
```

### API

[](#api)

#### .request(element, options?)

[](#requestelement-options)

Make an element fullscreen.

Accepts a DOM element and [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).

The default element is ``. If called with another element than the currently active, it will switch to that if it's a decendant.

If your page is inside an `` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).

Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key.

Returns a promise that resolves after the element enters fullscreen.

#### .exit()

[](#exit)

Brings you out of fullscreen.

Returns a promise that resolves after the element exits fullscreen.

#### .toggle(element, options?)

[](#toggleelement-options)

Requests fullscreen if not active, otherwise exits.

Accepts a DOM element and [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).

Returns a promise that resolves after the element enters/exits fullscreen.

#### .on(event, function)

[](#onevent-function)

Events: `'change' | 'error'`

Add a listener for when the browser switches in and out of fullscreen or when there is an error.

#### .off(event, function)

[](#offevent-function)

Remove a previously registered event listener.

#### .onchange(function)

[](#onchangefunction)

Alias for `.on('change', function)`

#### .onerror(function)

[](#onerrorfunction)

Alias for `.on('error', function)`

#### .isFullscreen

[](#isfullscreen)

Returns a boolean whether fullscreen is active.

#### .element

[](#element)

Returns the element currently in fullscreen, otherwise `null`.

#### .isEnabled

[](#isenabled)

Returns a boolean whether you are allowed to enter fullscreen. If your page is inside an `` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).

#### .raw

[](#raw)

Exposes the raw properties (prefixed if needed) used internally: `requestFullscreen`, `exitFullscreen`, `fullscreenElement`, `fullscreenEnabled`, `fullscreenchange`, `fullscreenerror`

FAQ
---

[](#faq)

### How can I navigate to a new page when fullscreen?

[](#how-can-i-navigate-to-a-new-page-when-fullscreen)

That's not supported by browsers for security reasons. There is, however, a dirty workaround. Create a seamless iframe that fills the screen and navigate to the page in that instead.

```
$('#new-page-btn').click(() => {
	const iframe = document.createElement('iframe')

	iframe.setAttribute('id', 'external-iframe');
	iframe.setAttribute('src', 'https://new-page-website.com');
	iframe.setAttribute('frameborder', 'no');
	iframe.style.position = 'absolute';
	iframe.style.top = '0';
	iframe.style.right = '0';
	iframe.style.bottom = '0';
	iframe.style.left = '0';
	iframe.style.width = '100%';
	iframe.style.height = '100%';

	$(document.body).prepend(iframe);
	document.body.style.overflow = 'hidden';
});
```

Resources
---------

[](#resources)

- [Using the Fullscreen API in web browsers](https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/)
- [MDN - Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode)
- [W3C Fullscreen spec](https://fullscreen.spec.whatwg.org/)
- [Building an amazing fullscreen mobile experience](https://developers.google.com/web/fundamentals/native-hardware/fullscreen/)

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 85.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1794d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/4b333bd44a2f7f526cc29a59b2945b27c7d2f31df68b92c2eb46efbddc032483?d=identicon)[gaomingcode](/maintainers/gaomingcode)

---

Top Contributors

[![sindresorhus](https://avatars.githubusercontent.com/u/170270?v=4)](https://github.com/sindresorhus "sindresorhus (154 commits)")[![gaomingcode](https://avatars.githubusercontent.com/u/53959161?v=4)](https://github.com/gaomingcode "gaomingcode (3 commits)")[![BendingBender](https://avatars.githubusercontent.com/u/4807083?v=4)](https://github.com/BendingBender "BendingBender (2 commits)")[![oskarrough](https://avatars.githubusercontent.com/u/184567?v=4)](https://github.com/oskarrough "oskarrough (2 commits)")[![Richienb](https://avatars.githubusercontent.com/u/29491356?v=4)](https://github.com/Richienb "Richienb (2 commits)")[![gfx](https://avatars.githubusercontent.com/u/101800?v=4)](https://github.com/gfx "gfx (1 commits)")[![hrajchert](https://avatars.githubusercontent.com/u/2634059?v=4)](https://github.com/hrajchert "hrajchert (1 commits)")[![jackplug](https://avatars.githubusercontent.com/u/881424?v=4)](https://github.com/jackplug "jackplug (1 commits)")[![leocaseiro](https://avatars.githubusercontent.com/u/940070?v=4)](https://github.com/leocaseiro "leocaseiro (1 commits)")[![levy9527](https://avatars.githubusercontent.com/u/9384365?v=4)](https://github.com/levy9527 "levy9527 (1 commits)")[![OscarGodson](https://avatars.githubusercontent.com/u/20615?v=4)](https://github.com/OscarGodson "OscarGodson (1 commits)")[![timdp](https://avatars.githubusercontent.com/u/201034?v=4)](https://github.com/timdp "timdp (1 commits)")[![paulgrock](https://avatars.githubusercontent.com/u/602462?v=4)](https://github.com/paulgrock "paulgrock (1 commits)")[![yocontra](https://avatars.githubusercontent.com/u/425716?v=4)](https://github.com/yocontra "yocontra (1 commits)")[![s-h-a-d-o-w](https://avatars.githubusercontent.com/u/16936908?v=4)](https://github.com/s-h-a-d-o-w "s-h-a-d-o-w (1 commits)")[![shinnn](https://avatars.githubusercontent.com/u/1131567?v=4)](https://github.com/shinnn "shinnn (1 commits)")[![SidKH](https://avatars.githubusercontent.com/u/7762253?v=4)](https://github.com/SidKH "SidKH (1 commits)")[![silltho](https://avatars.githubusercontent.com/u/5812228?v=4)](https://github.com/silltho "silltho (1 commits)")[![ben-eb](https://avatars.githubusercontent.com/u/1282980?v=4)](https://github.com/ben-eb "ben-eb (1 commits)")[![stormtrooper1859](https://avatars.githubusercontent.com/u/13604508?v=4)](https://github.com/stormtrooper1859 "stormtrooper1859 (1 commits)")

---

Tags

browserfullscreen

### Embed Badge

![Health badge](/badges/gaomingcode-screenfulljs/health.svg)

```
[![Health](https://phpackages.com/badges/gaomingcode-screenfulljs/health.svg)](https://phpackages.com/packages/gaomingcode-screenfulljs)
```

###  Alternatives

[jenssegers/agent

Desktop/mobile user agent parser with support for Laravel, based on Mobiledetect

4.8k67.8M440](/packages/jenssegers-agent)[behat/mink

Browser controller/emulator abstraction for PHP

1.6k86.1M606](/packages/behat-mink)[whichbrowser/parser

Useragent sniffing library for PHP

1.8k11.6M50](/packages/whichbrowser-parser)[chrome-php/chrome

Instrument headless chrome/chromium instances from PHP

2.6k4.5M64](/packages/chrome-php-chrome)[behat/mink-browserkit-driver

Symfony2 BrowserKit driver for Mink framework

54462.0M318](/packages/behat-mink-browserkit-driver)[behat/mink-selenium2-driver

Selenium2 (WebDriver) driver for Mink framework

51159.1M666](/packages/behat-mink-selenium2-driver)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)