How to make the window full screen with Javascript stretching all over the screen

Question

How can I make a visitor s browser go fullscreen using JavaScript  in a way that works with IE  Firefox and Opera

User · Answer

This code also includes how to enable full screen for Internet Explorer 9, and probably older versions, as well as very recent versions of Google Chrome. The accepted answer may also be used for other browsers.

var el = document.documentElement
    , rfs = // for newer Webkit and Firefox
           el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
}

Sources:

Chrome Fullscreen API (note, however, that requestFullscreen "only works during" "[m]ost UIEvents and MouseEvents, such as click and keydown, etc.", "so it cannot be used maliciously".)
How to make browser full screen using F11 key event through JavaScript

User · Answer

This will works to show your window in full screen  Note  For this to work  you need Query from http   code jquery com jquery-2 1 1 min js  Or make have  javascript link like this    lt script src  http   code jquery com jquery-2 1 1 min js  gt  lt  script gt       lt div id  demo-element  gt           lt span gt Full Screen Mode Disabled lt  span gt           lt button id  go-button  gt Enable Full Screen lt  button gt       lt  div gt       lt script gt      function GoInFullscreen element            if element requestFullscreen              element requestFullscreen            else if element mozRequestFullScreen              element mozRequestFullScreen            else if element webkitRequestFullscreen              element webkitRequestFullscreen            else if element msRequestFullscreen              element msRequestFullscreen               function GoOutFullscreen             if document exitFullscreen              document exitFullscreen            else if document mozCancelFullScreen              document mozCancelFullScreen            else if document webkitExitFullscreen              document webkitExitFullscreen            else if document msExitFullscreen              document msExitFullscreen               function IsFullScreenCurrently             var full screen element   document fullscreenElement    document webkitFullscreenElement    document mozFullScreenElement    document msFullscreenElement    null           if full screen element     null              return false          else             return true                 go-button   on  click   function             if IsFullScreenCurrently                GoOutFullscreen            else             GoInFullscreen     demo-element   get 0                   document  on  fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange   function             if IsFullScreenCurrently                      demo-element span   text  Full Screen Mode Enabled                    go-button   text  Disable Full Screen                      else                   demo-element span   text  Full Screen Mode Disabled                    go-button   text  Enable Full Screen                      lt  script gt

User · Answer

In Firefox 10  you can make the current page go fullscreen  real fullscreen with no window chrome  using this javascript   window fullScreen   true

User · Answer

Can you Try    x000D   x000D   lt script type  text javascript  gt  x000D      function go full screen    x000D        var elem   document documentElement  x000D        if  elem requestFullscreen    x000D          elem requestFullscreen    x000D          else if  elem msRequestFullscreen    x000D          elem msRequestFullscreen    x000D          else if  elem mozRequestFullScreen    x000D          elem mozRequestFullScreen    x000D          else if  elem webkitRequestFullscreen    x000D          elem webkitRequestFullscreen    x000D          x000D        x000D   lt  script gt  x000D   x000D   lt a href     onClick  go full screen     gt Full Screen   Compress Screen lt  a gt  x000D   x000D   x000D

User · Answer

Here is my full solution for Full Screen and Exit Full Screen both  many thanks to help from tower s answer above      document  ready function      is fs   false    requestFullScreen   function calr        var element   document body          Supports most browsers and their versions      var requestMethod   element requestFullScreen    element webkitRequestFullScreen    element mozRequestFullScreen    element msRequestFullScreen       if  requestMethod       Native full screen          requestMethod call element         else if  typeof window ActiveXObject      undefined        Older IE          var wscript   new ActiveXObject  WScript Shell            if  wscript     null                wscript SendKeys   F11                            is fs   true            calr  val  Exit Full Screen         cancel fs   function calr        var element   document    and NOT document body       var requestMethod   element exitFullScreen    element mozCancelFullScreen    element webkitExitFullScreen    element mozExitFullScreen    element msExitFullScreen    element webkitCancelFullScreen       if  requestMethod       Native full screen      requestMethod call element         else if  typeof window ActiveXObject      undefined        Older IE          var wscript   new ActiveXObject  WScript Shell            if  wscript     null                wscript SendKeys   F11                                calr  val  Full Screen              is fs   false       toggleFS   function calr              is fs    true    cancel fs calr    requestFullScreen calr               CALLING    lt input type  button  value  Full Screen  onclick    toggleFS this      gt

User · Answer

This may support       lt    Page Language  C   AutoEventWireup  true  CodeFile  Default5 aspx cs  Inherits  PRODUCTION Default5    gt        lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt        lt html xmlns  http   www w3 org 1999 xhtml   gt       lt head runat  server  gt           lt title gt Untitled Page lt  title gt           lt script type  text javascript  gt              function max                                window open       self    fullscreen yes  scrollbars auto                            lt  script gt       lt  head gt       lt body onload  max    gt           lt form id  form1  runat  server  gt           lt div gt          This is Test Page          lt  div gt           lt  form gt       lt  body gt       lt  html gt

User · Answer

A Q amp D way to go full screen  if you are in a  kiosk  situation  is to feed an F11 to the browser window after it s up and running  This is not pretty starting up and the user might be able to poke a touch screen at the top and get a semi-full-screen view  but feeding the F11 might do in a pinch or just to get started on a project

User · Answer

Try screenfull js  It s a nice cross-browser solution that should work for Opera browser as well      Simple wrapper for cross-browser usage of the JavaScript Fullscreen API  which lets you bring the page or any element into fullscreen  Smoothens out the browser implementation differences  so you don t have to    Demo

User · Answer

Create Function   function toggleFullScreen                  if   document fullScreenElement  amp  amp  document fullScreenElement     null                           document mozFullScreen  amp  amp   document webkitIsFullScreen                   scope topMenuData showSmall   true                  if  document documentElement requestFullScreen                        document documentElement requestFullScreen                      else if  document documentElement mozRequestFullScreen                        document documentElement mozRequestFullScreen                      else if  document documentElement webkitRequestFullScreen                        document documentElement webkitRequestFullScreen Element ALLOW KEYBOARD INPUT                                   else                       scope topMenuData showSmall   false                  if  document cancelFullScreen                        document cancelFullScreen                      else if  document mozCancelFullScreen                        document mozCancelFullScreen                      else if  document webkitCancelFullScreen                        document webkitCancelFullScreen                                                In Html Put Code like    lt ul class  unstyled-list fg-white  gt                lt li class  place-right  data-ng-if   topMenuData showSmall  data-ng-click  toggleFullScreen    gt Full Screen lt  li gt               lt li class  place-right  data-ng-if  topMenuData showSmall  data-ng-click  toggleFullScreen    gt Back lt  li gt           lt  ul gt

User · Answer

Luckily for unsuspecting web users this cannot be done with just javascript  You would need to write browser specific plugins  if they didn t already exist  and then somehow get people to download them  The closest you can get is a maximized window with no tool or navigation bars but users will still be able to see the url   window open  http   www web-page com    title     type fullWindow  fullscreen  scrollbars yes        This is generally considered bad practice though as it removes a lot of browser functionality from the user

User · Answer

In newer browsers such as Chrome 15  Firefox 10  Safari 5 1  IE 10 this is possible  It s also possible for older IE s via ActiveX depending on their browser settings   Here s how to do it   function requestFullScreen element           Supports most browsers and their versions      var requestMethod   element requestFullScreen    element webkitRequestFullScreen    element mozRequestFullScreen    element msRequestFullScreen       if  requestMethod       Native full screen          requestMethod call element         else if  typeof window ActiveXObject      undefined        Older IE          var wscript   new ActiveXObject  WScript Shell            if  wscript     null                wscript SendKeys   F11                        var elem   document body     Make the body go full screen  requestFullScreen elem     The user obviously needs to accept the fullscreen request first  and there is not possible to trigger this automatically on pageload  it needs to be triggered by a user  eg  a button   Read more  https   developer mozilla org en DOM Using full-screen mode

User · Answer

Simple example from  http   www longtailvideo com blog 26517 using-the-browsers-new-html5-fullscreen-capabilities    lt script type  text javascript  gt    function goFullscreen id           Get the element that we want to take into fullscreen mode     var element   document getElementById id           These function will not exist in the browsers that don t support fullscreen mode yet          so we ll have to check to see if they re available before calling them       if  element mozRequestFullScreen             This is how to go into fullscren mode in Firefox          Note the  moz  prefix  which is short for Mozilla        element mozRequestFullScreen          else if  element webkitRequestFullScreen             This is how to go into fullscreen mode in Chrome and Safari          Both of those browsers are based on the Webkit project  hence the same prefix        element webkitRequestFullScreen               Hooray  now we re in fullscreen mode       lt  script gt    lt img class  video player  src  image jpg  id  player  gt  lt  img gt   lt button onclick  goFullscreen  player    return false  gt Click Me To Go Fullscreen   For real  lt  button gt

User · Answer

This function work like a charm function toggle full screen         if   document fullScreenElement  amp  amp  document fullScreenElement     null       document mozFullScreen  amp  amp   document webkitIsFullScreen                 if  document documentElement requestFullScreen               document documentElement requestFullScreen                      else if  document documentElement mozRequestFullScreen      Firefox                document documentElement mozRequestFullScreen                      else if  document documentElement webkitRequestFullScreen        Chrome  Safari  amp  Opera                document documentElement webkitRequestFullScreen Element ALLOW KEYBOARD INPUT                     else if  document msRequestFullscreen      IE Edge                document documentElement msRequestFullscreen                        else               if  document cancelFullScreen               document cancelFullScreen                      else if  document mozCancelFullScreen      Firefox                document mozCancelFullScreen                      else if  document webkitCancelFullScreen        Chrome  Safari and Opera                document webkitCancelFullScreen                      else if  document msExitFullscreen      IE Edge                document msExitFullscreen                       To use it just call  toggle full screen

User · Answer

You can use The fullscreen API You can see an example here     The fullscreen API provides an easy way for web content to be   presented using the user s entire screen  This article provides   information about using this API

User · Answer

I ve used this      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN  gt    lt html gt    lt head gt       lt script language  JavaScript  gt          function fullScreen theURL                window open theURL       fullscreen yes  scrollbars auto                         End -- gt       lt  script gt   lt  head gt    lt body gt       lt h1 style  text-align  center   gt          Open In Full Screen      lt  h1 gt       lt div style  text-align  center   gt  lt br gt           lt a href  javascript void 0    onclick  fullScreen  http   google com     gt              Open Full Screen Window          lt  a gt       lt  div gt   lt  body gt    lt  html gt

User · Answer

Try this script   lt script language  JavaScript  gt  function fullScreen theURL    window open theURL       fullscreen yes  scrollbars auto        lt  script gt    For calling from script use this code   window fullScreen  fullscreen jsp      or with hyperlink use this   lt a href  javascript void 0    onclick  fullScreen  fullscreen jsp     gt   Open in Full Screen Window lt  a gt

User · Answer

The new html5 technology     fullscreen API gives us an easy way to   present a web page content in full-screen mode  We are about to give   you detailed information about the fullscreen mode  Just try to   imagine about all possible advantages which you can get using this   technology     full-screen photo albums  videos  and even games    But before we describe this new technology  I have to note that this technology is experimental  and supported by all major Browsers   You can find the full tutorial here   http   www css-jquery-design com 2013 11 javascript-jquery-fullscreen-browser-window-html5-technology   Here is working Demo   http   demo web3designs com javascript-jquery-fullscreen-browser-window-html5-technology htm

User · Answer

Here is a complete solution to get in and out of full screen mode  aka cancel  exit  escape          function cancelFullScreen                 var el   document              var requestMethod   el cancelFullScreen  el webkitCancelFullScreen  el mozCancelFullScreen  el exitFullscreen  el webkitExitFullscreen              if  requestMethod       cancel full screen                  requestMethod call el                 else if  typeof window ActiveXObject      quot undefined quot        Older IE                  var wscript   new ActiveXObject  quot WScript Shell quot                    if  wscript     null                        wscript SendKeys  quot  F11  quot                                                       function requestFullScreen el                   Supports most browsers and their versions              var requestMethod   el requestFullScreen    el webkitRequestFullScreen    el mozRequestFullScreen    el msRequestFullscreen               if  requestMethod       Native full screen                  requestMethod call el                 else if  typeof window ActiveXObject      quot undefined quot        Older IE                  var wscript   new ActiveXObject  quot WScript Shell quot                    if  wscript     null                        wscript SendKeys  quot  F11  quot                                                return false                    function toggleFullScreen el                if   el                    el   document body     Make the body go full screen                            var isInFullScreen    document fullScreenElement  amp  amp  document fullScreenElement     null       document mozFullScreen    document webkitIsFullScreen                if  isInFullScreen                    cancelFullScreen                  else                   requestFullScreen el                             return false

User · Answer

Now that the full screen APIs are more widespread and appear to be maturing  why not try Screenfull js  I used it for the first time yesterday and today our app goes truly full screen in  almost  all browsers  Be sure to couple it with the  fullscreen pseudo-class in CSS  See https   www sitepoint com use-html5-full-screen-api  for more

User · Answer

This is as close as you can get to full screen in JavaScript    lt script type  text javascript  gt      window onload   maxWindow       function maxWindow             window moveTo 0  0            if  document all                top window resizeTo screen availWidth  screen availHeight                      else if  document layers    document getElementById                if  top window outerHeight  lt  screen availHeight    top window outerWidth  lt  screen availWidth                    top window outerHeight   screen availHeight                  top window outerWidth   screen availWidth                                 lt  script gt

[javascript] How to make the window full screen with Javascript (stretching all over the screen)

Examples related to javascript

Examples related to fullscreen