onclick go full screen

Viewed 147992

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?

9 Answers

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!

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

so simple try this

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

Related