Wie kann man Fullscreen onclick mit Javascript beenden?

Question

Nicht sicher, ob der folgende Code-Snip in SO eingebettet funktioniert, da er beim Einfügen nicht funktionierte, funktioniert jedoch eigenständig.

Das Problem, ich will das ein Toggle sein; nicht nur um in den Vollbildmodus zu gelangen, sondern um es zu beenden, wenn der Benutzer im Vollbildmodus ist. Es geht perfekt in den Vollbildmodus und führt den Vollbild-Beendigungscode aus (da die alert() Box angezeigt wird, die nach dem Exit-Code läuft, aber nur innerhalb der Exit-Code-Bedingung), aber es tut nichts.

Ich habe auf dieser here und here gelesen, die scheint, dass ich alles richtig mache, aber etwas fehlt. Könnten Sie bitte helfen, herauszufinden, wie dieser Verfahrenscode funktioniert?

function fullscreen() { 
 
\t var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) || 
 
\t \t (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || 
 
\t \t (document.mozFullScreenElement && document.mozFullScreenElement !== null) || 
 
\t \t (document.msFullscreenElement && document.msFullscreenElement !== null); 
 

 
\t var docElm = document.documentElement; 
 
\t if (!isInFullScreen) { 
 
\t \t if (docElm.requestFullscreen) { 
 
\t \t \t docElm.requestFullscreen(); 
 
\t \t } else if (docElm.mozRequestFullScreen) { 
 
\t \t \t docElm.mozRequestFullScreen(); 
 
\t \t } else if (docElm.webkitRequestFullScreen) { 
 
\t \t \t docElm.webkitRequestFullScreen(); 
 
\t \t } else if (docElm.msRequestFullscreen) { 
 
\t \t \t docElm.msRequestFullscreen(); 
 
\t \t } 
 
\t } else { 
 
\t \t if (docElm.exitFullscreen) { 
 
\t \t \t docElm.exitFullscreen(); 
 
\t \t } else if (docElm.webkitExitFullscreen) { 
 
\t \t \t docElm.webkitExitFullscreen(); 
 
\t \t } else if (docElm.mozCancelFullScreen) { 
 
\t \t \t docElm.mozCancelFullScreen(); 
 
\t \t } else if (docElm.msExitFullscreen) { 
 
\t \t \t docElm.msExitFullscreen(); 
 
\t \t } 
 
\t \t alert('exit fullscreen, doesnt work'); 
 
\t } 
 
}

<a onclick="fullscreen()" href="javascript:void(0);">Toggle FullScreen</a>

Ich habe auch versucht parent.exitfs(), wo der Alarm-Code ist das Hinzufügen, nach this questions accepted answer und hat noch keine Auswirkungen

Answer 1

figured it out.

Offenbar müssen Sie das Element verwenden, um den Vollbildmodus aufzurufen. Um jedoch den Vollbildmodus zu beenden, verwenden Sie document.

Hier ist die komplette Javascript-Funktion um Vollbild umzuschalten das funktioniert !!!

function fullscreen() { 
    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) || 
     (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || 
     (document.mozFullScreenElement && document.mozFullScreenElement !== null) || 
     (document.msFullscreenElement && document.msFullscreenElement !== null); 

    var docElm = document.documentElement; 
    if (!isInFullScreen) { 
     if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
     } else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
     } else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
     } else if (docElm.msRequestFullscreen) { 
      docElm.msRequestFullscreen(); 
     } 
    } else { 
     if (document.exitFullscreen) { 
      document.exitFullscreen(); 
     } else if (document.webkitExitFullscreen) { 
      document.webkitExitFullscreen(); 
     } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
     } else if (document.msExitFullscreen) { 
      document.msExitFullscreen(); 
     } 
    } 
} 

Und ein einfacher Fall, wie man es benutzt:

<a onclick="fullscreen()" href="javascript:void(0);">Toggle FullScreen</a> 

Sie müssen sicherstellen, dass dies eine kurze Methode wird aufgerufen, wenn der Benutzer tut eine Aktion auf der Seite. Aus der Dokumentation geht hervor, dass dies ein Feature ist, das einen höheren Zugriffsmodus erfordert. Daher können Sie zu diesem Zeitpunkt den Vollbildmodus nicht automatisch für Dinge wie das Laden der Seite oder asynchrone Ereignisse erzwingen (es sei denn, es handelt sich um Ereignisse von Benutzer Aktion wie Click), etc.