# fullscrn

> Fullscreen API

Latest version **1.3.9** (published 2025-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install fullscrn
pnpm add fullscrn
yarn add fullscrn
bun add fullscrn
```

## Health

**Score 35/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.3.9 |
| Published | 2025-09-21 |
| First published | 2017-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 82.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Koji Takami |
| Maintainers | vzg03566 |
| Keywords | fullscreen, html5, polyfill |

## Links

- npm: https://www.npmjs.com/package/fullscrn
- Repository: https://github.com/takamin/fullscrn
- Homepage: https://takamints.hatenablog.jp/entry/wrapper-module-for-whatwg-full-screen-api
- Issues: https://github.com/takamin/fullscrn/issues
- npm.io page: https://npm.io/package/fullscrn

## Dependencies (1)

- [debug](https://npm.io/package/debug.md) ^4.4.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.3.9 (latest) — 2025-09-21
- 1.3.8 — 2024-09-28
- 1.3.7 — 2021-04-19
- 1.3.6 — 2020-12-06
- 1.3.5 — 2020-07-18
- 1.3.4 — 2020-04-07
- 1.3.3 — 2019-08-31
- 1.3.2 — 2019-07-19
- 1.3.1 — 2017-05-29
- 1.3.0 — 2017-05-13
- 1.2.1 — 2017-05-12
- 1.2.0 — 2017-05-12
- 1.1.0 — 2017-05-11
- 1.0.0 — 2017-05-10
- 0.0.1 — 2017-04-12

## README

Fullscrn
========

<img src="https://github.com/takamin/fullscrn/blob/gh-pages/images/logo.png?raw=true"
width="100%" style="max-width:900px"/>

Fullscreen API.
This module injects APIs to the DOM.
So, you don't have to consider about the prefix such as 'moz' or 'webkit'.

The implementation follows the standard specification at
[Fullscreen API - WHATWG](https://fullscreen.spec.whatwg.org/).

See also this [project page](https://takamin.github.io/fullscrn/).

INSTALLATION
------------

```bash
$ npm install --save fullscrn
```

REPOSITORY
----------

* [npm](https://www.npmjs.com/package/fullscrn)
* [GitHub](https://github.com/takamin/fullscrn) ([gh-pages](https://takamin.github.io/fullscrn))


FILES
-----

* fullscrn.js - The script to include by script tag.
* fullscrn.min.js - Minified one.
* index.js - The source file of this module.
This can be import using browserify.


APIs Injected to DOM
--------------------

### Properties

* __Document.fullscreenEnabled__ -
The full screen API's availability.
* __Document.fullscreenElement__ -
Indicates the full sized element.
* __Document.fullscreen__ -
The equivalent value to (Document.fullscreenElement != null).

### Methods

These methods returns promise.

* __Element.requestFullscreen()__ -
Requests the fullscreen mode with the element.
* __Document.exitFullscreen()__ -
Cancels the fullscreen mode of the element that
is set to fullscreen at the time.

### Events

Use `document.addEventListener` to handle events while
this module does not supoort the event handlers -
`Document.onfullscreenchange` and onfullscreenerror.

* __Document `"fullscreenchange"`__
* __Document `"fullscreenerror"`__

### SAMPLE

__[sample/injected.html](sample/injected.html)__ [[live sample]](https://takamin.github.io/fullscrn/sample/injected.html).

```html
<body onload="main();">
    <button type="button" onclick="request1();"
    >Full&gt;&gt;</button>
    <span id="panel">
        <button type="button" onclick="request2();"
        >Full&gt;&gt;</button>
        <button type="button" id="exitButton"
        onclick="exit();">&lt;&lt;Exit</button>
    </span>
    <script src="../fullscrn.js"></script>
    <script>
        var panel = document.getElementById("panel");
        var exitButton = document.getElementById("exitButton");
        Fullscreen.debugMode(true);// Enables debug log
        function main() {
            // Handle change event
            document.addEventListener("fullscreenchange",
                function() {
                    var fse = document.fullscreenElement;
                    console.log("FULLSCREEN CHANGE: " +
                        ((fse == null)? "(null)": "#" + fse.id));
                });

            // Handle error event
            document.addEventListener("fullscreenerror",
                function() { console.log("FULLSCREEN ERROR"); });

            request1(); // This should be error
        }
        function request1() {
            panel.requestFullscreen().then(function(){
                console.log("request1 done.");
            }).catch(function(err) {
                console.error(err.message);
            });
        }
        function request2() {
            exitButton.requestFullscreen().then(function(){
                console.log("request2 done.");
            }).catch(function(err) {
                console.error(err.message);
            });
        }
        function exit() {
            document.exitFullscreen()
            .then(function(){
                console.log("exit done.");
            }).catch(function(err) {
                console.error(err.message);
            });
        }
    </script>
</body>
```


Exported APIs
-------------

If this module was included by script tag, the global object 'Fullscreen'
is available (see the `sample/sample.html` below).

### Properties

* Fullscreen.enabled - indicates the fullscreen APIs are available.
* Fullscreen.element - references the fullscreen element or null.

### Methods

* Fullscreen.request(element) - enter full screen mode with the element and returns a promise.
* Fullscreen.exit(): exit full screen mode and returns a promise.


### SAMPLE

__[sample/sample.html](sample/sample.html)__ [[live sample]](https://takamin.github.io/fullscrn/sample/sample.html).

```html
<body>
    <button type="button"
        onclick="requestFull();">Fullscreen</button>
    <button type="button" id="exitButton"
         style="display:none;"
         onclick="exitFull();">Exit</button>
    <script src="../fullscrn.js"></script>
    <script>
        function exitButton() {
            return document.getElementById("exitButton");
        }
        function requestFull() {
            var btn = exitButton();
            btn.style.display = "block";
            Fullscreen.request(btn);
        }
        function exitFull() {
            var btn = exitButton();
            btn.style.display = "none";
            Fullscreen.exit();
        }
    </script>
</body>
```

LICENSE
-------

This software is released under the MIT License, see [LICENSE](LICENSE)

---
_Source: https://npm.io/package/fullscrn · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
