onclick go full screen

Javascript Problem Overview

I'm creating a web-app for the upcoming Chrome Web-store. Is there a way to simulate F11 being pressed? Or simply a command that will make the current window go full screen?

Javascript Solutions

Solution 1 - Javascript

I realize this is a very old question, and that the answers provided were adequate, since is active and I came across this by doing some research on fullscreen, I leave here one update to this topic:

There is a way to "simulate" the F11 key, but cannot be automated, the user actually needs to click a button for example, in order to trigger the full screen mode.

###Toggle Fullscreen status on button click

With this example, the user can switch to and from fullscreen mode by clicking a button:

HTML element to act as trigger:

    <input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">

JavaScript:

    function toggleFullScreen() {
      if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
       (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        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 {  
        if (document.cancelFullScreen) {  
          document.cancelFullScreen();  
        } else if (document.mozCancelFullScreen) {  
          document.mozCancelFullScreen();  
        } else if (document.webkitCancelFullScreen) {  
          document.webkitCancelFullScreen();  
        }  
      }  
    }

###Go to Fullscreen on button click

This example allows you to enable full screen mode without making alternation, ie you switch to full screen but to return to the normal screen will have to use the F11 key:

HTML element to act as trigger:

    <input type="button" value="click to go fullscreen" onclick="requestFullScreen()">

JavaScript:

    function requestFullScreen() {

      var el = document.body;

      // 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 !== "undefined") {

        // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");

        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    }

Sources found along with useful information on this subject:

Mozilla Developer Network

How to make in Javascript full screen windows (stretching all over the screen)

How to make browser full screen using F11 key event through JavaScript

Chrome Fullscreen API

jQuery fullscreen event plugin, version 0.2.0

jquery-fullscreen-plugin

Solution 2 - Javascript

It's possible with JavaScript.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Solution 3 - Javascript

Short personal bookmarklet version

javascript: document.body.webkitRequestFullScreen();

go fullscreen ← You can drag this link to your bookmark bar to create the bookmarklet, but you have to edit its URL afterwards: Delete everything before javascript, including the single slash: ~~http://delete_me/~~javascript:[…]

This works for me in Google Chrome. You have to test whether it works in your environment and otherwise use a different wording of the function call, e.g. javascript:document.body.requestFullScreen(); – see the other answers for the possible variants.

_{Based on the answers by @Zuul and @default – thanks!}

Solution 4 - Javascript

If you want to switch the whole tab to fullscreen (just like F11 keypress) document.documentElement is the element you are looking for:

function go_full_screen(){
	var elem = document.documentElement;
	if (elem.requestFullscreen) {
	  elem.requestFullscreen();
	} else if (elem.msRequestFullscreen) {
	  elem.msRequestFullscreen();
	} else if (elem.mozRequestFullScreen) {
	  elem.mozRequestFullScreen();
	} else if (elem.webkitRequestFullscreen) {
	  elem.webkitRequestFullscreen();
	}
}

Solution 5 - Javascript

I tried other answers on this question, and there are mistakes with the different browser APIs, particularly Fullscreen vs FullScreen. Here is my code that works with the major browsers (as of Q1 2019) and should continue to work as they standardize.

function fullScreenTgl() {
    let doc=document,elm=doc.documentElement;
    if      (elm.requestFullscreen      ) { (!doc.fullscreenElement   ? elm.requestFullscreen()       : doc.exitFullscreen()        ) }
    else if (elm.mozRequestFullScreen   ) { (!doc.mozFullScreen       ? elm.mozRequestFullScreen()    : doc.mozCancelFullScreen()   ) }
    else if (elm.msRequestFullscreen    ) { (!doc.msFullscreenElement ? elm.msRequestFullscreen()     : doc.msExitFullscreen()      ) }
    else if (elm.webkitRequestFullscreen) { (!doc.webkitIsFullscreen  ? elm.webkitRequestFullscreen() : doc.webkitCancelFullscreen()) }
    else                                  { console.log("Fullscreen support not detected.");                                          }
    }

Solution 6 - Javascript

Here are a couple of ways to do that:

I'd suggest, provide a popup asking the user if s/he wants to go full screen and then call this javascript accordingly.

Solution 7 - Javascript

//set height of html
$("html").css("height", screen.height);
//set width of html
$("html").css("width", screen.width);
//go to full screen mode
document.documentElement.webkitRequestFullscreen();

Solution 8 - Javascript

var elem = document.getElementById("myvideo");
function openFullscreen() {
  if (elem.requestFullscreen) {
      elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
      elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
  }
}
//Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.

Solution 9 - Javascript

so simple try this

<div dir="ltr" style="text-align: left;" trbidi="on">
<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-html -->

    <br />
<div class="container">
<br />
<section class="main-content">
                                        <center>
<a href="https://www.blogger.com/blogger.g?blogID=6482388854607090827#"><button id="view-fullscreen">view full size page large</button></a></center>
<script>(function () {
        var viewFullScreen = document.getElementById("view-fullscreen");
        if (viewFullScreen) {
            viewFullScreen.addEventListener("click", function () {
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
            }, false);
        }
        })();</script>
                                               </section>
    </div>
<!-- end snippet --></div>

Content Type	Original Author	Original Content on Stackoverflow
Question	David	View Question on Stackoverflow
Solution 1 - Javascript	Zuul	View Answer on Stackoverflow
Solution 2 - Javascript	alex	View Answer on Stackoverflow
Solution 3 - Javascript	Aaron Thoma	View Answer on Stackoverflow
Solution 4 - Javascript	default	View Answer on Stackoverflow
Solution 5 - Javascript	Lawrence Dol	View Answer on Stackoverflow
Solution 6 - Javascript	KMån	View Answer on Stackoverflow
Solution 7 - Javascript	Ruchi Sharma	View Answer on Stackoverflow
Solution 8 - Javascript	m b k	View Answer on Stackoverflow
Solution 9 - Javascript	Udit mehra	View Answer on Stackoverflow