I am writing an application for myself in which I need to go fullscreen automatically via JavaScript (today I simulate the press of F11, which usually works, but not always).

I would like to use .requestFullscreen() (via screenfull.js) but I get

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

This is understandable (for security / spam / usability reasons) and mentioned on numerous pages.

Now, since this is my application running on my Chrome browser, I would like to have the ability to allow this request in my browser. Is this a possible setting for Chrome?

I am writing an application for myself in which I need to go fullscreen automatically via JavaScript (today I simulate the press of F11, which usually works, but not always).

I would like to use .requestFullscreen() (via screenfull.js) but I get

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

This is understandable (for security / spam / usability reasons) and mentioned on numerous pages.

Now, since this is my application running on my Chrome browser, I would like to have the ability to allow this request in my browser. Is this a possible setting for Chrome?

• javascript
• google-chrome
• fullscreen

• 1 If it's your application and your browser, you will have to press your F11 to make it work. Fullscreen cannot be activated by scripting anymore on any modern browser. – ThoriumBR Commented Sep 11, 2017 at 20:00
• @ThoriumBR: I was hoping for a switch or chrome://something setting. This is a keyboardless setup (server and screen) so I will be back to my simulated F11. Thanks. – WoJ Commented Sep 11, 2017 at 20:24
• I posted an answer using the new information you provided. It changed the question pletely. – ThoriumBR Commented Sep 11, 2017 at 20:29

2 Answers 2

You can use kiosk mode:

On Windows:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --chrome --fullscreen --kiosk http://10.20.30.40/page/

On Linux

chrome  --chrome --fullscreen --kiosk http://10.20.30.40/page/

The fullscreen api is a little confusing because as of now, no browser accepts the plain "unprefixed" version. Mozilla has a pretty good explanation of the fullscreen api here, with a list of the appropriate prefixes.

So to get fullscreen in Chrome, you actually need to call .webkitRequestFullscreen(). If you want to support multiple browsers, you need to use an if-else block to make sure you have all the proper prefixes, like so:

if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }

It's ugly, but unfortunately it's necessary. You also need to add the appropriate prefixes for exiting full screen, and on any css that you might apply. One last bug you might see is that webkit browsers do not display an element at full size in fullscreen mode, so you need to add the following to your stylesheet.

-webkit-full-screen {
  width: 100%;
  height: 100%;
}