✔ EventListener im fullscreen verwenden

  • Themenstarter Themenstarter ByeBye 249712
  • Beginndatum Beginndatum
Lies dir mal die Diskussion aus meinem Link auf Stackoverflow durch, dort findest Du die Lösung: Eventlistener für
fullscreenchange registrieren. Darin kannst Du dann das Ausblenden deines div programmieren.
(Antwort 2)
 
Andernfalls empfehle ich, die Vorlage des JS-Codes aus dem Beispiel https://developer.mozilla.org/samples/domref/fullscreen.html, auf dem dein "FullScreen"-Script in Ansätzen beruht (siehe https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Specification), 1:1 zu übernehmen, und nicht nur Fragmente davon zu portieren.

Diese Zeile
Javascript: 
.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
scheint dabei auch nicht irrelevant zu sein.

celtx hat gesagt.:
Also zunächst ist meine Slideshow nicht online, desshalb kann ich dazu leider keinen Link schicken.
Zum Vergrößern anklicken....
In solch einem Fall kann auf http://jsfiddle.net zurückgegriffen werden ;)

1. Code-Snippets in den zugehörigen Feldern einfügen
2. "Run" klicken (zum Testen)
3. "Save" klicken
4. "Share" klicken
5. Link posten
 
Zuletzt bearbeitet:
okei, also ich hab jetzt mal die Idee von SpiceLab bei mir integriert und angepasst.
Mit der Eingabe-Taste kann ich jetzt jederzeit in den Fullscreen wechseln und wieder auf die Ausgangsseite zurück.
Verwende übrigens den Firefox 38.0.1 (neuste Version)

Javascript: 
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {

    document.getElementById('picturefullscreen').style.display = 'block';   

var documentElement = document.getElementById('picturefullscreen');

  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (documentElement.mozRequestFullScreen) {
      documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.getElementById('picturefullscreen').style.display = 'none';   
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

Allerdings will ich das ganze über einen Button realisieren - ok, über die Eingabe-Taste zum Vollbild
soll auch erstmal ok sein. Aber wie komm ich jetzt mit Escape zurück zum Ausgangsbildschirm?
Der User beendet ein Fullscreen ja intuitiv mit Escape. So wie dass jetzt implementiert ist, geht das bisher nur
mit der Eingabe-Taste.
Ich hab dann einfach zwei Funktionen gemacht; für Das Drücken der Eingabe-Taste und der Escape-Taste.
Dadurch lande ich dann allerdings wieder beim Ausgangsproblem: Nach Drücken der Escape-Taste ist das Bild,
welches zuvor im Volbild angezeigt wurde immer noch da.

Javascript: 
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {

    document.getElementById('picturefullscreen').style.display = 'block';   

var documentElement = document.getElementById('picturefullscreen');

  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (documentElement.mozRequestFullScreen) {
      documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  }
}


document.addEventListener("keydown", function(e) {
  if (e.keyCode == 27) {
    toggleFullScreen2();
  }
}, false);

function toggleFullScreen2() {

    document.getElementById('picturefullscreen').style.display = 'block';   

var documentElement = document.getElementById('picturefullscreen');

    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.getElementById('picturefullscreen').style.display = 'none';   
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
}


Ansonsten muss ich vielleicht doch mal schaun, was genau, und wie ich das bei http://jsfiddle.net
sinnvoll hochstelle. :-/
 
Hallo celtx,
schade, dass Du meine Empfehlung ignorierst. Damit könntest Du es, genau wie Du es ursprünglich vor hattest, einwandfrei umsetzen. In der Antwort 2 ist ein gebrauchsfertiger Code. Poste mal ein Fiddle, dann zeige ich es dir.
 
hei,

Ignoriert hab ich sie gar nicht. Das hatte nur irgendwie nicht funtioniert.
Meinst du diesen Code hier:

Javascript: 
if (document.addEventListener)
{
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', exitHandler, false);
}

function exitHandler()
{
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
    {
        /* Run code on exit */
    }
}
 
Ignoriert hab ich sie gar nicht.
Zum Vergrößern anklicken....
Das ist gut zu wissen!
Genau, Du brauchst in der Funktion exitHandler nur deinen Code einzutragen, dann hast Du genau was Du willst:
Code: 
function exitHandler()
{
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
    {
        document.getElementById('picturefullscreen').style.display = 'none';
    }
}
Bin sicher, dass das funktioniert. Wenn nicht, dann mach ein Fiddle oder poste deinen ganzen Code.
Gerade die Escape-Taste wird von den Browsern besonders geschützt, um sicherzustellen, dass Programmierer keinen Unsinn machen können. Da wollte doch jemand allen Ernstes wissen, wie man diese deaktivieren kann! Wäre eine Katastrophe, wenn das möglich wäre und man aus dem Fullscreen-Modus nicht mehr heraus käme.
 
Zuletzt bearbeitet:
Ja, das ist allerdings verrückt. Warum sollte man die auch deaktivieren wollen?!

Ich weis jetzt auch wieder was mich an der exitHandler()-Funktion gestört hat.
Ich kann jetzt zwar über meinen Button (altbewährt) in den Volbildmodus gehen und über Escape
in den Ausgangsmodus zurückwechseln, was ansich super ist.
Das komische ist allerdings dass, sobald ich Zeile 5 (siehe: dein letzter Post) hinzufüge, er meine gesamte Webseite
in den Vollbildmodus bringt und nicht nur das Bild, welches sich im div-Container befindet.
Lasse ich die Zeile weg, bringt er nur das Bild (wie gewollt) in den Vollbildmodus.
 
So wie es bei dir auch steht:

Javascript: 
function exitHandler()
{
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
    {
      document.getElementById('picturefullscreen').style.display = 'none'; 
    }
}

Irgendwie seltsam dass das Auswirkungen auf die Vollbilddarstellung hat, oder?
 
Das Problem ist, dass dass der Exithandler auch beim Aufschalten des Fullscreen-Modus triggert und leider ist dabei Eigenschaft document.mozFullScreen schon gesetzt, so dass diese Anweisung auch beim Aufschalten wirksam ist. Versuche gerade, dafür eine Lösung zu finden ...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück