Beispiel:JS-Fullscreen-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Fullscreen - 1</title>
  <style>
#stage {
	position: relative;
	width: 30em;
}

img {width: 100%}

button.fullscreen {
		position: absolute;
		top: 0;
		right: 0;
}
kbd {
    background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
    border: thin solid #aaa;
    border-radius: 2px;
    box-shadow: 1px 2px 2px #ddd;
    font-family: inherit;
    font-size: 0.9em;
    padding: 0 0.5em;
}
</style>

<script>
'use strict'; 
document.addEventListener('DOMContentLoaded', function () {
	const stage  = document.querySelector('#stage'),
	      toggleButton = document.querySelector('#stage button');			
	stage.addEventListener('click', toggler);

	function toggler(event) { 
		console.log("toggler",window.matchMedia('(display-mode: fullscreen)').matches);
		if (window.matchMedia('(display-mode: fullscreen)').matches) {
			console.log('exit');
    	exitFullscreen();  
		} else { 
			console.log('enter');
    	enterFullscreen(stage); 
 		}
	}
	
	stage.addEventListener("fullscreenchange", updateButton);
	
	function updateButton(event) {
		console.log("fullscreenchange");
		toggleButton.classList.toggle('fullscreen');
		toggleButton.textContent = (toggleButton.textContent == 'Vollbildmodus ⛶') ? 'Vollbildmodus verlassen X' : 'Vollbildmodus ⛶';
	}
});

function enterFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {      // for IE11 (remove June 2022)
    element.msRequestFullscreen();
  }
}

function exitFullscreen() { console.log('exit');
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}
</script>

</head>
 
<body>
<h1>Fullscreen - 1</h1>

<p>
  Mit einem Klick auf das Bild öffnen Sie es im Vollbildmodus.<br>
  Mit <kbd>ESC</kbd> kehren Sie zur klassischen Ansicht zurück.
</p>
<figure id="stage">
  <img src="https://wiki.selfhtml.org/images/a/ab/Peru-3.jpg" alt="Peru 2007: Machu Picchu">
  <button>Vollbildmodus ⛶</button>
</figure>

<p>
  Mit einem Klick auf <kbd>F11</kbd> öffnen Sie die <b>gesamte Seite</b> im Vollbildmodus.<br>
  Mit einem weiteren Klick kehren Sie zur klassischen Ansicht zurück.
</p>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-Fullscreen-1.html&oldid=80640“