Toggle and Force Full Screen via Javascript

Toggle and Force Full Screen via Javascript

If you ever wanted to toggle full-screen or want to force full screen on user, you can do with below function  :-

function toggleFullScreen() {
			  if (!document.fullscreenElement &&    // alternative standard method
				  !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
				if (document.documentElement.requestFullscreen) {
				  document.documentElement.requestFullscreen();
				} else if (document.documentElement.msRequestFullscreen) {
				  document.documentElement.msRequestFullscreen();
				} else if (document.documentElement.mozRequestFullScreen) {
				  document.documentElement.mozRequestFullScreen();
				} else if (document.documentElement.webkitRequestFullscreen) {
				  document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
				}
			  } else {
				if (document.exitFullscreen) {
				  document.exitFullscreen();
				} else if (document.msExitFullscreen) {
				  document.msExitFullscreen();
				} else if (document.mozCancelFullScreen) {
				  document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) {
				  document.webkitExitFullscreen();
				}
			  }
			}
			function forceFullscreen() {
				top.resizeTo(window.screen.availWidth, window.screen.availHeight);
				top.moveTo(0,0);
				setTimeout("forceFullscreen", 250);
			}

Above are 2 function “forceFullscreen” and “toggleFullScreen”, you can create any type of “event” handler to process full screen event.

Note: On each click inside dom element during full screen, it will loose full screen event due to security reason from browser.

Recent Posts