In this example, a handler for the fullscreenchange event is added to the Document.
If the user clicks on the "Toggle Fullscreen Mode" button, the click handler will toggle fullscreen mode for the div. If document.fullscreenElement has a value it will exit fullscreen mode. If not, the div will be placed into fullscreen mode.
Remember that by the time the fullscreenchange event is handled, the status of the element has already changed. So if the change is to fullscreen mode, document.fullscreenElement will point to the element that is now in fullscreen mode. On the other hand, if document.fullscreenElement is null, fullscreen mode has been canceled.
What that means to the example code is that, if an element is currently in fullscreen mode, the fullscreenchange handler logs the id of the fullscreen element to the console. If document.fullscreenElement is null, the code logs a message that the change is to leave fullscreen mode.
<h1>fullscreenchange event example</h1>
<div id="fullscreen-div">
<button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
<pre id="logger"></pre>
</div>
* {
box-sizing: border-box;
}
#fullscreen-div {
height: 150px;
padding: 1rem;
background-color: pink;
}
#logger {
height: 80px;
padding: 0 0.5rem;
background-color: white;
overflow: scroll;
}
const logger = document.querySelector("#logger");
const fullScreenElement = document.querySelector("#fullscreen-div");
function log(message) {
logger.textContent = `${logger.textContent}\n${message}`;
}
function fullscreenchangeHandler(event) {
// document.fullscreenElement will point to the element that
// is in fullscreen mode if there is one. If there isn't one,
// the value of the property is null.
if (document.fullscreenElement) {
log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
} else {
log("Leaving fullscreen mode.");
}
}
document.addEventListener("fullscreenchange", fullscreenchangeHandler);
// When the toggle button is clicked, enter/exit fullscreen
document.getElementById("toggle-fullscreen").addEventListener("click", () => {
if (document.fullscreenElement) {
// exitFullscreen is only available on the Document object.
document.exitFullscreen();
} else {
fullScreenElement.requestFullscreen();
}
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4