Computing Magazine

For Better Web Experience - Full Screen API

Posted on the 10 October 2012 by Araldam @araldam
Some web applications may require to hide the title bar and the address bar of the browser and show it as a desktop application in full screen view, so that users get the best experience in viewing. Conventional way of doing this is to open a new window using the "window.open" method as follows.
<script type="text/javascript">
   var newWindow;
   var url = "www.google.com";
   window.onload = function (url) {
   newWindow = window.open(url, 'name', 'fullscreen=yes,location=0,titlebar=0,top = 0, left = 0,  width = '+screen.availWidth + ', height = ' +screen.availHeight + '');
   if (window.focus) {newWindow.focus()}
   }
</script>

Using this method you can customize the new window popup by setting the properties associated with the third parameter. Get More details here
However, due to security reasons modern browsers don't allow to hide title bar and address bar anymore.Therefore alternative is to use a java script library such as Full screen API which employes HTML5 capabilities of browsers without loosing the inbuilt security mechanisms.
Full screen API provides an easy way of presenting web content to users. So far this works for browsers Chrome 15+, Firefox 10+, Opera 5.1+ and still under development stage.
Pretty simple java script code as shown below can be used for enabling full screen in a full web page or in a single element such as in a image.
<button id="flScrBtn" onclick="requestFullScreen();">Full Screen whole page</button>
<script type="text/javascript">
   function requestFullScreen() {
   var el = document.documentElement ,
   rfs = el.requestFullScreen || el.webkitRequestFullScreen
   || el.mozRequestFullScreen || el.msRequestFullScreen;
   if (typeof rfs != "undefined" & rfs) {
   rfs.call(el);
   } else if (typeof window.ActiveXObject != "undefined") {
   var wscript = new ActiveXObject("WScript.Shell");
   if (wscript != null) {
   wscript.SendKeys("{F11}");
   }
   }
   }
</script>
 

Click here to go full screen.
For Better web experience - Full Screen API

To work this code properly it needs to associate with a event handler such as mouse click. This is to prevent using the full screen API  for malicious purposes.
References
1. https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode
2. http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

3. http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen

Back to Featured Articles on Logo Paperblog