{"id":13401311,"url":"https://github.com/sindresorhus/screenfull","last_synced_at":"2026-04-08T13:31:05.627Z","repository":{"id":2396316,"uuid":"3362916","full_name":"sindresorhus/screenfull","owner":"sindresorhus","description":"Simple wrapper for cross-browser usage of the JavaScript Fullscreen API","archived":false,"fork":false,"pushed_at":"2022-07-08T13:02:03.000Z","size":164,"stargazers_count":7151,"open_issues_count":14,"forks_count":687,"subscribers_count":136,"default_branch":"main","last_synced_at":"2026-04-02T07:34:40.211Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sindresorhus.com/screenfull","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sindresorhus.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/funding.yml","license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/security.md","support":null},"funding":{"github":"sindresorhus","open_collective":"sindresorhus","custom":"https://sindresorhus.com/donate"}},"created_at":"2012-02-05T23:13:52.000Z","updated_at":"2026-03-28T22:44:37.000Z","dependencies_parsed_at":"2022-07-09T08:46:11.478Z","dependency_job_id":null,"html_url":"https://github.com/sindresorhus/screenfull","commit_stats":null,"previous_names":["sindresorhus/screenfull.js"],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/sindresorhus/screenfull","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fscreenfull","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fscreenfull/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fscreenfull/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fscreenfull/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sindresorhus","download_url":"https://codeload.github.com/sindresorhus/screenfull/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fscreenfull/sbom","scorecard":{"id":826802,"data":{"date":"2025-08-11","repo":{"name":"github.com/sindresorhus/screenfull","commit":"991e917bffc818c5367186c6ec5e70ae7a37cfc5"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.2,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/sindresorhus/screenfull/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/sindresorhus/screenfull/main.yml/main?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/main.yml:20","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":2,"reason":"Found 8/30 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":10,"reason":"security policy file detected","details":["Info: security policy file detected: .github/security.md:1","Info: Found linked content: .github/security.md:1","Info: Found disclosure, vulnerability, and/or timelines in security policy: .github/security.md:1","Info: Found text in security policy: .github/security.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: license:0","Info: FSF or OSI recognized license: MIT License: license:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-23T16:46:49.483Z","repository_id":2396316,"created_at":"2025-08-23T16:46:49.483Z","updated_at":"2025-08-23T16:46:49.483Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31450406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T15:22:31.103Z","status":"ssl_error","status_checked_at":"2026-04-05T15:22:00.205Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:01:01.258Z","updated_at":"2026-04-08T13:31:05.601Z","avatar_url":"https://github.com/sindresorhus.png","language":"HTML","readme":"# screenfull\n\n\u003e 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.\n\n**This package is ESM. Please [familiarize](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) yourself with what that implies.**\\\nIf you cannot use ESM or need to support older browsers without using transpilation, use version 5.2.0.\n\n**[Not supported on iPhone](#support)**\n\n**This package is feature complete. No new features will be accepted.**\n\n#### [Demo](https://sindresorhus.com/screenfull)\n\n## Install\n\nOnly 0.7 kB gzipped.\n\n```sh\nnpm install screenfull\n```\n\nAlso available on [cdnjs](https://cdnjs.com/libraries/screenfull.js/5.1.0) *(older version)*.\n\n## Why?\n\n### Screenfull\n\n```js\nimport screenfull from 'screenfull';\n\nif (screenfull.isEnabled) {\n\tscreenfull.request();\n}\n```\n\n### Vanilla JavaScript\n\n```js\ndocument.fullscreenEnabled =\n\tdocument.fullscreenEnabled ||\n\tdocument.mozFullScreenEnabled ||\n\tdocument.documentElement.webkitRequestFullScreen;\n\nfunction requestFullscreen(element) {\n\tif (element.requestFullscreen) {\n\t\telement.requestFullscreen();\n\t} else if (element.mozRequestFullScreen) {\n\t\telement.mozRequestFullScreen();\n\t} else if (element.webkitRequestFullScreen) {\n\t\telement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n\t}\n}\n\nif (document.fullscreenEnabled) {\n\trequestFullscreen(document.documentElement);\n}\n\n// This is not even entirely comprehensive. There's more.\n```\n\n## Support\n\n[Supported browsers](https://caniuse.com/#feat=fullscreen)\n\n**Note:** Safari is supported on desktop and iPad, but not on iPhone. This is a limitation in the browser, not in Screenfull.\n\n## Documentation\n\n### Examples\n\n#### Fullscreen the page\n\n```js\nimport screenfull from 'screenfull';\n\ndocument.getElementById('button').addEventListener('click', () =\u003e {\n\tif (screenfull.isEnabled) {\n\t\tscreenfull.request();\n\t} else {\n\t\t// Ignore or do something else\n\t}\n});\n```\n\n#### Fullscreen an element\n\n```js\nimport screenfull from 'screenfull';\n\nconst element = document.getElementById('target');\n\ndocument.getElementById('button').addEventListener('click', () =\u003e {\n\tif (screenfull.isEnabled) {\n\t\tscreenfull.request(element);\n\t}\n});\n```\n\n#### Hide navigation user-interface on mobile devices\n\n```js\nimport screenfull from 'screenfull';\n\nconst element = document.getElementById('target');\n\ndocument.getElementById('button').addEventListener('click', () =\u003e {\n\tif (screenfull.isEnabled) {\n\t\tscreenfull.request(element, {navigationUI: 'hide'});\n\t}\n});\n```\n\n#### Fullscreen an element with jQuery\n\n```js\nimport screenfull from 'screenfull';\n\nconst element = $('#target')[0]; // Get DOM element from jQuery collection\n\n$('#button').on('click', () =\u003e {\n\tif (screenfull.isEnabled) {\n\t\tscreenfull.request(element);\n\t}\n});\n```\n\n#### Toggle fullscreen on a image with jQuery\n\n```js\nimport screenfull from 'screenfull';\n\n$('img').on('click', event =\u003e {\n\tif (screenfull.isEnabled) {\n\t\tscreenfull.toggle(event.target);\n\t}\n});\n```\n\n#### Detect fullscreen change\n\n```js\nimport screenfull from 'screenfull';\n\nif (screenfull.isEnabled) {\n\tscreenfull.on('change', () =\u003e {\n\t\tconsole.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');\n\t});\n}\n```\n\nRemove listeners with:\n\n```js\nimport screenfull from 'screenfull';\n\nscreenfull.off('change', callback);\n```\n\n#### Detect fullscreen error\n\n```js\nimport screenfull from 'screenfull';\n\nif (screenfull.isEnabled) {\n\tscreenfull.on('error', event =\u003e {\n\t\tconsole.error('Failed to enable fullscreen', event);\n\t});\n}\n```\n\nSee the [demo](https://sindresorhus.com/screenfull) for more examples, and view the source.\n\n#### Fullscreen an element with Angular.js\n\nYou can use the [Angular.js binding](https://github.com/hrajchert/angular-screenfull) to do something like:\n\n```html\n\u003cdiv ngsf-fullscreen\u003e\n\t\u003cp\u003eThis is a fullscreen element\u003c/p\u003e\n\t\u003cbutton ngsf-toggle-fullscreen\u003eToggle fullscreen\u003c/button\u003e\n\u003c/div\u003e\n```\n\n#### Fullscreen the page with Angular 2\n\n```ts\nimport {Directive, HostListener} from '@angular/core';\nimport screenfull from 'screenfull';\n\n@Directive({\n\tselector: '[toggleFullscreen]'\n})\nexport class ToggleFullscreenDirective {\n\t@HostListener('click') onClick() {\n\t\tif (screenfull.isEnabled) {\n\t\t\tscreenfull.toggle();\n\t\t}\n\t}\n}\n```\n\n```html\n\u003cbutton toggleFullscreen\u003eToggle fullscreen\u003cbutton\u003e\n```\n\n### API\n\n#### .request(element, options?)\n\nMake an element fullscreen.\n\nAccepts a DOM element and [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).\n\nThe default element is `\u003chtml\u003e`. If called with another element than the currently active, it will switch to that if it's a descendant.\n\nIf your page is inside an `\u003ciframe\u003e` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).\n\nKeep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key.\n\nReturns a promise that resolves after the element enters fullscreen.\n\n#### .exit()\n\nBrings you out of fullscreen.\n\nReturns a promise that resolves after the element exits fullscreen.\n\n#### .toggle(element, options?)\n\nRequests fullscreen if not active, otherwise exits.\n\nAccepts a DOM element and [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).\n\nReturns a promise that resolves after the element enters/exits fullscreen.\n\n#### .on(event, function)\n\nEvents: `'change' | 'error'`\n\nAdd a listener for when the browser switches in and out of fullscreen or when there is an error.\n\n#### .off(event, function)\n\nRemove a previously registered event listener.\n\n#### .onchange(function)\n\nAlias for `.on('change', function)`\n\n#### .onerror(function)\n\nAlias for `.on('error', function)`\n\n#### .isFullscreen\n\nReturns a boolean whether fullscreen is active.\n\n#### .element\n\nReturns the element currently in fullscreen, otherwise `undefined`.\n\n#### .isEnabled\n\nReturns a boolean whether you are allowed to enter fullscreen. If your page is inside an `\u003ciframe\u003e` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).\n\n#### .raw\n\nExposes the raw properties (prefixed if needed) used internally: `requestFullscreen`, `exitFullscreen`, `fullscreenElement`, `fullscreenEnabled`, `fullscreenchange`, `fullscreenerror`\n\n## FAQ\n\n### How can I navigate to a new page when fullscreen?\n\nThat'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.\n\n```js\nimport screenfull from 'screenfull';\n\ndocument.querySelector('#new-page-button').addEventListener(() =\u003e {\n\tconst iframe = document.createElement('iframe')\n\n\tiframe.setAttribute('id', 'external-iframe');\n\tiframe.setAttribute('src', 'https://new-page-website.com');\n\tiframe.setAttribute('frameborder', 'no');\n\tiframe.style.position = 'absolute';\n\tiframe.style.top = '0';\n\tiframe.style.right = '0';\n\tiframe.style.bottom = '0';\n\tiframe.style.left = '0';\n\tiframe.style.width = '100%';\n\tiframe.style.height = '100%';\n\n\tdocument.body.prepend(iframe);\n\tdocument.body.style.overflow = 'hidden';\n});\n```\n\n## Resources\n\n- [Using the Fullscreen API in web browsers](https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/)\n- [MDN - Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode)\n- [W3C Fullscreen spec](https://fullscreen.spec.whatwg.org/)\n- [Building an amazing fullscreen mobile experience](https://developers.google.com/web/fundamentals/native-hardware/fullscreen/)\n","funding_links":["https://github.com/sponsors/sindresorhus","https://opencollective.com/sindresorhus","https://sindresorhus.com/donate"],"categories":["HTML","目录","Repository"],"sub_categories":["FullScreen"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsindresorhus%2Fscreenfull","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsindresorhus%2Fscreenfull","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsindresorhus%2Fscreenfull/lists"}