web-dev-qa-db-fra.com

API Chrome Fullscreen

Selon cet article Google Chrome 15 dispose d’une API JavaScript plein écran.

J'ai essayé de le faire fonctionner mais j'ai échoué. J'ai aussi cherché des documents officiels en vain.

À quoi ressemble l'API JavaScript plein écran?

javascriptgoogle-chromefullscreen
67
Randomblue

L'API ne fonctionne que lors de l'interaction de l'utilisateur. Par conséquent, elle ne peut pas être utilisée de manière malveillante. Essayez le code suivant:

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

    rfs.call(el);
});
138
Eli Grey

J'ai créé un wrapper simple pour l'API Fullscreen, appelé screenfull.js , afin de lisser le désordre du préfixe et de corriger certaines incohérences dans les différentes implémentations. Consultez le demo pour voir comment fonctionne l'API Fullscreen.

Lecture recommandée:

32
Sindre Sorhus

Voici quelques fonctions que j'ai créées pour travailler en plein écran dans le navigateur.

Ils fournissent à la fois une entrée/sortie plein écran sur la plupart des principaux navigateurs.

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);
}
14
Drew Noakes

Le test suivant fonctionne dans Chrome 16 (branche dev) sur X86 et Chrome 15 sur Mac OSX Lion.

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

6
Mo Kargas

Dans le projet de bibliothèque de fermeture de Google, il existe un module qui fait le travail. Ci-dessous, l'API et le code source.

API fullscreen.js de la bibliothèque de fermeture

Fermeture du code libray fullscreen.js

0
monjer