Is there any way to enable full screen browser with Javascript?

Asked

Viewed 28,027 times

23

I note that the main browsers are in full screen mode when pressing the F11 key, this is a functionality of the browser itself or it is possible to activate it through some Javascript code?

If you can’t do it via code, how to open a new window only with the page. No browser buttons, and with the address bar blocked etc.

javascript

2 answers

16


There is a form of simulate the use of key F11, but cannot be automated.

As this is a feature that only the user can control, it will have to click a button (for example), in order to activate full screen mode.

  • Example Switch

    This example allows you to toggle between full screen and normal browser window by clicking on the same element.

    Action button

    <input type="button" value="clique para alternar" onclick="toggleFullScreen()">

    Function

    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();  
    }  
  }  
}

  • Example Switch to Full Screen

    This example allows you to activate full screen mode without switching, that is, the user switches to full screen but to return to normal screen you will have to use the key F11:

    Action button

    <input type="button" value="clique para ativar tela cheia" onclick="requestFullScreen()">

    Function

    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 and useful information I found on this subject:

User response credits @Zuul in this answer in the original Stackoverflow.

  • 1

    urls are all broken from the example

  • Example links no longer work.

  • @Bsalvo Thanks, I will see and put again online.

  • 1

    Who gave a negative vote! You can explain what is wrong in the answer ?

9

It is possible to enable full screen via Javascript at certain browsers. Even, you can place a single element in fullscreen (like a video), or the entire document.

Example for the whole document (extracted from MDN):

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

This API is not yet fully standardized. A while ago, there was a restriction that full-screen mode would need to be triggered by user intervention (like a click on something). I’m not sure if the restriction still exists, I saw no reference in the current article of MDN (but there is clues that this limitation already existed in Firefox).

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.