Display fullscreen website using javascript (Internet Explorer/Safari/Chrome/Firefox)//

Until now, this is a great information, there are many browser that have implemented fullscreen supporting (Firefox, Chrome, Safari and must be a trick for Internet Explorer). That's so interesting for somebody want to do something with their website by make it fullscreen, may be great idea for webgame or something like that.

Previously, fullscreen only support for <video> html5 tag (to display a fullscreen video), but now, it could be support in any DOM element whether the part of a site. However, some difference principle for difference browser, because of there is not an uniform for that. This is current support method for some common browser:

Mozilla Proposal	Chrome/Safari	Firefox	W3C Proposal	Function
.requestFullScreen()	.webkitRequestFullScreen()	.mozRequestFullScreen()	.requestFullscreen()	Start request to make an element fullscreen
.cancelFullScreen()	.webkitCancelFullScreen()	.mozCancelFullScreen()	.exitFullscreen()	Exit fullscreen mode
.fullScreen	.webkitIsFullScreen	.mozfullScreen	None currently	Boolean flag to check is in fullscreen mode
:full-screen	:-webkit-full-screen	:-moz-full-screen	:fullscreen	CSS pseudo-class apply to the element in fullscreen mode
fullscreeneventchange	webkitfullscreeneventchange	.mozfullscreenchange	.fullscreeneventchange	Fullscreen mode changed event name
fullscreendenied		.		Fullscreen user denied event name (for future)

The mozilla proposal seem like the standard and the current support browsers such as Chrome, Safari, Firefox only append the prefix to it. Internet Explorer and Opera do not support native fullscreen function right now, but for the future, may be Microsoft will use "ms" prefix and Opera like "o" prefix.

Example: request fullscreen in Chrome/Safari:

1. if  ( typeof document. webkitCancelFullScreen  !=  'undefined'  && document. webkitIsFullScreenEnabled  ===  true )  {
2.     element. webkitRequestFullScreen ( ) ;
3.     document. webkitCancelFullScreen ( ) ;
4. }

Hide/show line number

What should we do is checking for the browser that user is using and then use the correct method to request fullscreen display. John Dyer has create a usefull object that can work standalone or become a jQuery plugin, it may be work correctly on IE and Opera in the future, thank to John Dyer. But we have already improved it for working with IE as follow:

1. ( function ( )  {
2.      var
3.         fullScreenApi  =  {
4.             supportsFullScreen :  false ,
5.             nonNativeSupportsFullScreen :  false ,
6.             isFullScreen :  function ( )  {  return  false ;  } ,
7.             requestFullScreen :  function ( )  { } ,
8.             cancelFullScreen :  function ( )  { } ,
9.             fullScreenEventName :  '' ,
10.             prefix :  ''
11.          } ,
12.         browserPrefixes  =  'webkit moz o ms khtml'. split ( ' ' ) ;
13.  
14.      // check for native support
15.      if  ( typeof document. cancelFullScreen  !=  'undefined' )  {
16.         fullScreenApi. supportsFullScreen  =  true ;
17.      }  else  {
18.          // check for fullscreen support by vendor prefix
19.          for  ( var i  =  0 , il  = browserPrefixes. length ; i  < il ; i ++  )  {
20.             fullScreenApi. prefix  = browserPrefixes [i ] ;
21.  
22.              if  ( typeof document [fullScreenApi. prefix  +  'CancelFullScreen'  ]  !=  'undefined'  )  {
23.                 fullScreenApi. supportsFullScreen  =  true ;
24.  
25.                  break ;
26.              }
27.          }
28.      }
29.  
30.      // update methods to do something useful
31.      if  (fullScreenApi. supportsFullScreen )  {
32.         fullScreenApi. fullScreenEventName  = fullScreenApi. prefix  +  'fullscreenchange' ;
33.  
34.         fullScreenApi. isFullScreen  =  function ( )  {
35.              switch  ( this. prefix )  {
36.                  case  '' :
37.                      return document. fullScreen ;
38.                  case  'webkit' :
39.                      return document. webkitIsFullScreen ;
40.                  default :
41.                      return document [ this. prefix  +  'FullScreen' ] ;
42.              }
43.          }
44.         fullScreenApi. requestFullScreen  =  function (el )  {
45.              return  ( this. prefix  ===  '' )  ? el. requestFullScreen ( )  : el [ this. prefix  +  'RequestFullScreen' ] ( ) ;
46.          }
47.         fullScreenApi. cancelFullScreen  =  function (el )  {
48.              return  ( this. prefix  ===  '' )  ? document. cancelFullScreen ( )  : document [ this. prefix  +  'CancelFullScreen' ] ( ) ;
49.          }
50.      }
51.      else  if  ( typeof  window. ActiveXObject  !==  "undefined" )  {  // IE.
52.         fullScreenApi. nonNativeSupportsFullScreen  =  true ;
53.         fullScreenApi. requestFullScreen  = fullScreenApi. requestFullScreen  =  function  (el )  {
54.                  var wscript  =  new ActiveXObject ( "WScript.Shell" ) ;
55.                  if  (wscript  !==  null )  {
56.                     wscript. SendKeys ( "{F11}" ) ;
57.                  }
58.          }
59.         fullScreenApi. isFullScreen  =  function ( )  {
60.                  return document. body. clientHeight  == screen. height  && document. body. clientWidth  == screen. width ;
61.          }
62.      }
63.  
64.      // jQuery plugin
65.      if  ( typeof jQuery  !=  'undefined' )  {
66.         jQuery. fn. requestFullScreen  =  function ( )  {
67.  
68.              return  this. each ( function ( )  {
69.                  if  (fullScreenApi. supportsFullScreen )  {
70.                     fullScreenApi. requestFullScreen ( this ) ;
71.                  }
72.              } ) ;
73.          } ;
74.      }
75.  
76.      // export api
77.     window. fullScreenApi  = fullScreenApi ;
78. } ) ( ) ;

Hide/show line number

How to use? First, add the Fullscreen api above to your webpage (must be after jQuery init if you want to make it work as a jQuery plugin). Call the fullScreenApi.requestFullScreen() function in your button click event or using $(element).requestFullScreen() as jQuery plugin, example:

1. <html>
2.          <head>
3.                  <script>
4.                          <!-- Fullscreen API -->
5.                  </script>
6.          </head>
7.          <body>
8.                  <button onclick="fullScreenApi.requestFullScreen(document.documentElement)" />
9.          </body>
10. </html>

Hide/show line number

This is native fullscreen support demo of John Dyer: http://johndyer.name/lab/fullscreenapi/

Note: There is a small problem with default IE 9 security setting. IE 9 browser security must be allow ActiveX control by go to Tool / Internet Options, at Sercurity tab, click Custom Level button, find "Initialize and script ActiveX control not marked as safe." option and change it to Prompt or Enable.

To do something when switched between fullscreen mode and normal mode. We could use:

1. if  (fullScreenApi. supportsFullScreen )
2. {
3.     element. addEventListener (fullScreenApi. fullScreenEventName ,  function (e )  {
4.      if  (fullScreenApi. fullScreen )  {
5.         /* do when fullscreen */
6.      }  else  {
7.         /* do when is not fullscreen */
8.      }
9. } ,  true ) ;

Hide/show line number

The eventListener above is proposed by W3C and Mozila. It doesn't work in Internet Explorer, for IE, we could use:

1. window. onresize  =  function ( )  {
2.          if  (fullScreenApi. isFullScreen ( ) )
3.          {
4.                  alert ( 'fullscreen' ) ;
5.          }
6. }

Hide/show line number

The code above also work for other browser too. Althought we should use proposal unless can:

1. if  (fullScreenApi. supportsFullScreen )  {
2.     window. addEventListener (fullScreenApi. fullScreenEventName ,  function (e )  {
3.          if  (fullScreenApi. isFullScreen ( ) )  {
4.                         doWhenFullScreen ( ) ;
5.                  }
6.                  else  {
7.                         doWhenNotFullScreen ( ) ;
8.                  }
9.          } ,  true ) ;
10. }
11. else  if  (fullScreenApi. nonNativeSupportsFullScreen ) {
12.          //Only notify when fullscreen state changed, so save the last state
13.         fullScreenApi. lastState  = fullScreenApi. isFullScreen ( ) ;
14.        
15.         window. onresize  =  function ( )  {
16.                  //Check is duplicated
17.                  if  (fullScreenApi. lastState  != fullScreenApi. isFullScreen ( ) )  {
18.                         fullScreenApi. lastState  = fullScreenApi. isFullScreen ( )
19.                        
20.                          if  (fullScreenApi. isFullScreen ( ) )  {
21.                                 doWhenFullScreen ( ) ;
22.                          }
23.                          else  {
24.                                 doWhenNotFullScreen ( ) ;
25.                          }
26.                  }
27.          } ;
28. }

Hide/show line number

Which the FullScreen API above, we can set fullscreen DOM element in Chrome/Safari/Firefox and switch browser to fullscreen mode in Internet Explorer. Other browser such as Opera is not support fullscreen right now. We could use standard method such as open new webpage in fullscreen or just detect what browser user is using and notify them to change another browser. This is standard javascript code to open new fullscreen window:

1. window. open ( 'http://www.rdpslides.com/index.html' ,  '' ,  'fullscreen=yes, scrollbars=auto' ) ;

Hide/show line number

Hope that help!

- See more at: http://xme.im/display-fullscreen-website-using-javascript#sthash.wSrUipBr.dpuf