Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM exitFullscreen() method
The HTML DOM exitFullscreen() method is used for getting an element currently in the full screen mode to get out of that mode. It does nothing if executed on an element that isn’t in the full screen mode already.
Syntax
Following is the syntax for exitFullscreen() method −
HTMLElementObject.exitFullscreen()
Example
Let us look at an example for the exitFullscreen() method −
<!DOCTYPE html>
<html>
<head>
<style>
var docEle = document.documentElement;
function GoNormal() {
if (document.exitFullscreen)
document.exitFullscreen();
}
function GoFullscreen() {
if (docEle.requestFullscreen)
docEle.requestFullscreen();
}
</style>
</head>
<body>
<h1>exitFullscreen() method example</h1>
<img src="EiffelTower.jpg" width="200px" height="200px">
<p>The Eiffel Tower was built on 28 January 1887</p>
<button onclick="GoFullscreen();">Fullscreen View</button>
<button onclick="GoNormal();">Normal view</button>
</body>
</html>Output
This will produce the following output −
On clicking the Fullscreen View −
You will get back to original screen size either by hitting Esc key on keyboard or clicking the “Normal view” button −
In the above example −
We have created two buttons “FullScreen View” and “Normal View” that will execute the GoFullScreen() or GoNormal() functions respectively when clicked by the user −
<button onclick="GoFullscreen();">Fullscreen View</button> <button onclick="GoNormal();">Normal view</button>
The GoFullscreen() function gets the document root element which in HTML documents is an <html> element. It then checks to see if the screen isn’t already in the fullscreen mode by getting the document’s boolean requestFullScreen property value. If it isn’t in fullscreen view, then it executes the requestFullScreen() method using the <html> element. You can take any other element too and it will enable full screen for that element only −
function GoFullscreen() {
if (docEle.requestFullscreen)
docEle.requestFullscreen();
}The GoNormal() function gets the document’s exitFullScreen boolen property value to check if the screen isn’t already in the normal view. If the screen isn’t in normal view then it executes the document’s exitFullScreen() method −
function GoNormal() {
if (document.exitFullscreen)
document.exitFullscreen();
}
29 Views
