Web browser’s full-screen (F11) toggle function on a web page

• 

The following script allows you to integrate the browser’s full-screen toggle function when you click on the button. Click the button below in the demo to view the page in the browser’s full-screen mode. You can click it again to get back to the normal view.

Demo link – https://demos.webdevpuneet.com/javascript/toggle-fullscreen/index.html

---

Code

<button id="goFS" onclick="toggleFullScreen()">Toggle Fullscreen Mode</button>

<script>
	function toggleFullScreen() {
	  var doc = window.document;
	  var docEl = doc.documentElement;

	  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
	  var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

	  if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
		requestFullScreen.call(docEl);
	  }
	  else {
		cancelFullScreen.call(doc);
	  }
	}
</script>