Open page full screen with older browsers support (JavaScript)

Viewing a page in full screen mode, using JavaScript and requestFullscreen() method. Then exiting back to normal mode. With older browsers support:

HTML code:

<div class="example">
	<input type="button" value="Open Full Screen" />
	<input type="button" value="Exit Full Screen" />
</div>

JavaScript code:

<script>
var open = document.querySelector('.example input[value="Open Full Screen"]');
var close = document.querySelector('.example input[value="Exit Full Screen"]');

// Go to full screen mode
open.addEventListener( 'click', function() {
	// Modern browsers
	if ( document.documentElement.requestFullscreen ) {
		document.documentElement.requestFullscreen();
	// Firefox
	} else if ( document.documentElement.mozRequestFullScreen ) {
		document.documentElement.mozRequestFullScreen();
	// Chrome, Safari and Opera
	} else if ( document.documentElement.webkitRequestFullscreen ) {
		document.documentElement.webkitRequestFullscreen();
	// Internet Explorer 11
	} else if ( document.documentElement.msRequestFullscreen ) {
		document.documentElement.msRequestFullscreen();
	}
}, false );

// Exit full screen mode
close.addEventListener( 'click', function() {
	// Modern browsers
	if ( document.exitFullscreen ) {
		document.exitFullscreen();
	// Firefox
	} else if ( document.mozCancelFullScreen ) {
		document.mozCancelFullScreen();
	// Chrome, Safari and Opera
	} else if ( document.webkitExitFullscreen ) {
		document.webkitExitFullscreen();
	// Internet Explorer 11
	} else if ( document.msExitFullscreen ) {
		document.msExitFullscreen();
	}
}, false );
</script>

Links

1. Element: requestFullscreen() method developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen
2. Document: exitFullscreen() method developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen
3. Fullscreen with JavaScript w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen2
4. Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript stackoverflow.com/questions/7179535/set-window-to-fullscreen-real-fullscreen-f11-functionality-by-javascript
5. How to enable IE full-screen feature like firefox and chrome stackoverflow.com/questions/13503016/how-to-enable-ie-full-screen-feature-like-firefox-and-chrome

Browser support

Windows

Edge 12.0+

Firefox 9.0+

Google Chrome 15.0+

Opera 15.0+

Linux

Firefox 9.0+

Google Chrome 15.0+

Opera 15.0+

iOS

Safari 12.0+ (Available only on iPad, not iPhone)

Android

Samsung Internet 1.0+

Chrome 18.0+

Firefox 9.0+

Opera 14.0+

More

• Open page full screen (JavaScript)