For Better web experience - Full Screen API

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(document.documentElement);">Full Screen whole page</button>

<script type="text/javascript">

    function requestFullScreen(el) {
                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>

 

To fullscreenify a element, you need to pass the element to  "requestFullScreen()" method.
 
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. https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
3. https://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen