Chrome Fullscreen API

Question

According to this article Google Chrome 15 has a fullscreen JavaScript API.

I have tried to make it work but failed. I have also searched for official documentation in vain.

What does the fullscreen JavaScript API look like?

This is the proposed specification which is going to be implemented: https://wiki.mozilla.org/Gecko:FullScreenAPI#Proposed_Specification. — pimvdb, Oct 20 '11 at 14:36
I've not been able to get it working either, though they did implement this in WebKit: https://bugs.webkit.org/show_bug.cgi?id=43099. This is the Chromium bug which might be relevant: http://code.google.com/p/chromium/issues/detail?id=73923. — pimvdb, Oct 20 '11 at 17:49
You can launch it in "kiosk mode" (full screen, no controls) like this: chrome.exe –kiosk http://... — Diodeus - James MacFarlane, Oct 20 '11 at 19:24

score 143 · Accepted Answer · edited Aug 31 '16 at 16:01

143

The API only works during user interaction, so it cannot be used maliciously. Try the following code:

addEventListener("click", function() {
    var el = document.documentElement,
      rfs = el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen 
    ;

    rfs.call(el);
});

edited Aug 31 '16 at 16:01

Dmitry Gonchar

1,647
2
16
26

answered Oct 28 '11 at 19:38

Eli Grey

32,712
13
69
92

3

How is "user interaction" defined? – Randomblue Oct 28 '11 at 22:39
Most `UIEvent`s and `MouseEvent`s, such as `click` and `keydown`, etc. – Eli Grey Oct 28 '11 at 23:22
This works to go into full screen for me but when the user navigates to the next page in my site, it exits full screen. Is there any way to avoid this? – alex9311 Jul 22 '13 at 17:15
1

@alex9311 As far as I know, you need to use AJAX to update content. You can't leave the page. – Michael Mar 16 '14 at 18:41
this works with "click" but not "mouseenter". But mouseenter is ALSO a user-interaction. – johny why Aug 27 '15 at 12:30
@johny Fullscreen mode allows to fake any GUI (like VPN password entry window), and "user interaction" should make user suspect something. Also, it prevents webpages from covering the whole screen in uncontrollable way. Obviously, "mouseenter" and especially "mousemove" fail in both cases. – EvgEnZh Nov 16 '15 at 08:20

score 35 · Answer 2 · answered Apr 22 '12 at 14:29

35

I made a simple wrapper for the Fullscreen API, called screenfull.js, to smooth out the prefix mess and fix some inconsistencies in the different implementations. Check out the demo to see how the Fullscreen API works.

Recommended reading:

answered Apr 22 '12 at 14:29

Sindre Sorhus

62,754
35
155
217

Wow - such a great plugin, thanks! Is there any way to open a link in fullscreen while the current tab remains non-fullscreen? didn't find anything like that in the demo. – cukabeka Dec 19 '14 at 17:27

score 16 · Answer 3 · edited Jan 17 '17 at 02:33

Here are some functions I created for working with fullscreen in the browser.

They provide both enter/exit fullscreen across most major browsers.

function isFullScreen()
{
    return (document.fullScreenElement && document.fullScreenElement !== null)
         || document.mozFullScreen
         || document.webkitIsFullScreen;
}


function requestFullScreen(element)
{
    if (element.requestFullscreen)
        element.requestFullscreen();
    else if (element.msRequestFullscreen)
        element.msRequestFullscreen();
    else if (element.mozRequestFullScreen)
        element.mozRequestFullScreen();
    else if (element.webkitRequestFullscreen)
        element.webkitRequestFullscreen();
}

function exitFullScreen()
{
    if (document.exitFullscreen)
        document.exitFullscreen();
    else if (document.msExitFullscreen)
        document.msExitFullscreen();
    else if (document.mozCancelFullScreen)
        document.mozCancelFullScreen();
    else if (document.webkitExitFullscreen)
        document.webkitExitFullscreen();
}

function toggleFullScreen(element)
{
    if (isFullScreen())
        exitFullScreen();
    else
        requestFullScreen(element || document.documentElement);
}

score 7 · Answer 4 · answered Oct 28 '11 at 00:07

7

The following test works in Chrome 16 (dev branch) on X86 and Chrome 15 on Mac OSX Lion

http://html5-demos.appspot.com/static/fullscreen.html

answered Oct 28 '11 at 00:07

Mo Kargas

1,000
7
24

When I type "enterFullScreen()" from the console, it doesn't go fullscreen. – Randomblue Oct 28 '11 at 12:22
3

You must make the requestFullScreen() call on an element that you wish to display in fullscreen. There is no way to simply jump into the mode. Here is another excellent description of the FullScreen API by John Dyer with a full example http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ – Mo Kargas Oct 29 '11 at 01:53
Link 404s now . – Anthony Aug 26 '20 at 07:47

score 0 · Answer 5 · answered Jul 15 '15 at 09:03

0

In Google's closure library project , there is a module which has do the job , below is the API and source code.

Closure library fullscreen.js API

Closure libray fullscreen.js Code

answered Jul 15 '15 at 09:03

monjer

2,689
2
19
28

Chrome Fullscreen API

5 Answers5

Linked