Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to exit fullscreen onclick using Javascript?

Not sure if the following code snip will work embedded on SO, as it didn't work when pasting it, however it does work stand-alone.

The problem, is I want this to be a toggle; not just to enter fullscreen mode, but to exit it if the user is in fullscreen. It goes into fullscreen mode perfectly, and executes the exit fullscreen code (as the alert() box is shown which runs after the exit code but inside the exit code condition only) yet it does nothing.

I have read up on this here, and here which seems that I am doing everything correct, but something is missing. Could you please assist in figuring out how to make this procedural code work.

function fullscreen() {  	var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||  		(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||  		(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||  		(document.msFullscreenElement && document.msFullscreenElement !== null);    	var docElm = document.documentElement;  	if (!isInFullScreen) {  		if (docElm.requestFullscreen) {  			docElm.requestFullscreen();  		} else if (docElm.mozRequestFullScreen) {  			docElm.mozRequestFullScreen();  		} else if (docElm.webkitRequestFullScreen) {  			docElm.webkitRequestFullScreen();  		} else if (docElm.msRequestFullscreen) {  			docElm.msRequestFullscreen();  		}  	} else {  		if (docElm.exitFullscreen) {  			docElm.exitFullscreen();  		} else if (docElm.webkitExitFullscreen) {  			docElm.webkitExitFullscreen();  		} else if (docElm.mozCancelFullScreen) {  			docElm.mozCancelFullScreen();  		} else if (docElm.msExitFullscreen) {  			docElm.msExitFullscreen();  		}  		alert('exit fullscreen, doesnt work');  	}  }
<a onclick="fullscreen()" href="javascript:void(0);">Toggle FullScreen</a>

I also tried adding parent.exitfs() where the alert code is, according to this questions accepted answer and still has no impact

like image 933
Kraang Prime Avatar asked Apr 17 '16 04:04

Kraang Prime


People also ask

How to exit fullscreen javascript?

The document. exitFullscreen() method exits full screen mode (it's always called on the document ). The fullscreenchange event fires when the browser goes in or out of full screen mode. The fullscreenerror event fires when an element fails to enter full screen mode.

How to disable full screen in html?

The exitFullscreen() method cancels an element in fullscreen mode.

How do you get out of full screen?

To exit from a full-screen session, do one of the following: Click the window close icon in the toolbar. Use the Host-Q key combination.

How do I exit full screen mode in Chrome?

The keyboard methods used to move out of full-screen mode: Esc key (top left of your keyboard) brings the top menu and taskbar. Fullscreen (F4) key toggles from full-screen to a smaller sized window.


1 Answers

Figured it out.

Apparently, to enter full screen, you need to use the Element, however to exit fullscreen, you use document.

Here is the complete javascript function to toggle fullscreen that works !!!

function fullscreen() {     var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||         (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||         (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||         (document.msFullscreenElement && document.msFullscreenElement !== null);      var docElm = document.documentElement;     if (!isInFullScreen) {         if (docElm.requestFullscreen) {             docElm.requestFullscreen();         } else if (docElm.mozRequestFullScreen) {             docElm.mozRequestFullScreen();         } else if (docElm.webkitRequestFullScreen) {             docElm.webkitRequestFullScreen();         } else if (docElm.msRequestFullscreen) {             docElm.msRequestFullscreen();         }     } else {         if (document.exitFullscreen) {             document.exitFullscreen();         } else if (document.webkitExitFullscreen) {             document.webkitExitFullscreen();         } else if (document.mozCancelFullScreen) {             document.mozCancelFullScreen();         } else if (document.msExitFullscreen) {             document.msExitFullscreen();         }     } } 

And a simple case on how to use it :

<button onclick="fullscreen()">Toggle FullScreen</button> 

You need to make sure that this is a short method called when the user does an action on the page. From what the documentation says, is this is a feature that requires a higher access mode, and thus you can not (at this time) automatically force fullscreen on things like when the page has loaded, or async events (unless they are events from a users action like Click), etc.

like image 113
Kraang Prime Avatar answered Sep 19 '22 18:09

Kraang Prime