70

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?

3

5 Answers 5

145
+25

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);
});
6
  • 4
    How is "user interaction" defined?
    – Randomblue
    Commented Oct 28, 2011 at 22:39
  • Most UIEvents and MouseEvents, such as click and keydown, etc.
    – Eli Grey
    Commented Oct 28, 2011 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
    Commented Jul 22, 2013 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
    Commented Mar 16, 2014 at 18:41
  • this works with "click" but not "mouseenter". But mouseenter is ALSO a user-interaction.
    – johny why
    Commented Aug 27, 2015 at 12:30
34

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:

1
  • 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
    Commented Dec 19, 2014 at 17:27
18

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

3
  • When I type "enterFullScreen()" from the console, it doesn't go fullscreen.
    – Randomblue
    Commented Oct 28, 2011 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 johndyer.name/…
    – Mo Kargas
    Commented Oct 29, 2011 at 1:53
  • Link 404s now .
    – Anthony
    Commented Aug 26, 2020 at 7:47
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.