html iframe durch button klick anzeigen lassen?
Hallo! Ich habe mich mal ein wenig mit html versucht und versuche nun ein iframe durch einen button klick anzeigen zu lassen.. jedoch habe ich keine ahnung von css, java oder sonst irgendwelchen anderen programiersprachen :D. Ist es irgendwie möglich so etwas auch nur in html zu "programmieren"? Versuche mehrere Videos durch verschiedene Knöpfe anzeigen und wieder verschwinden zu lassen. Danke im voraus
3 Antworten
jedoch habe ich keine ahnung von css, java oder sonst irgendwelchen anderen programiersprachen :D. Ist es irgendwie möglich so etwas auch nur in html zu "programmieren"?
Nun, Java benötigst du zu deinem Glück überhaupt nicht. JavaScript einzubeziehen, wäre hingegen nicht verkehrt, wobei es auch eine Lösung ohne gibt. Nur mit HTML allein schaffst du es aber nicht.
Ich zeige zunächst ein einfaches Beispiel mit HTML, CSS und JavaScript:
<!doctype html>
<head>
<title>Show or hide iframe</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<iframe id="iframe" src="some-url ..."></iframe>
<button id="button" type="button">Hide</button>
<script>
const iframe = document.getElementById("iframe");
document.getElementById("button").addEventListener("click", function() {
iframe.classList.toggle("hidden");
this.innerText = iframe.classList.contains("hidden") ? "Show" : "Hide";
});
</script>
</body>
Dem Button wird ein Event Listener angehängt. Bei Klick wird dem iframe-Element entweder eine CSS-Klasse (hidden) zugefügt oder wieder genommen (siehe toggle-Funktion). Wenn sie auf dem Element gesetzt ist, wird der initiale Wert der display-Eigenschaft mit none überschrieben.
Das Setzen des Buttontexts (innerText) ist nur hübsches Beiwerk.
Nun noch zu der oben erwähnten Lösung ohne JavaScript:
<!doctype html>
<head>
<title>Show or hide iframe</title>
<style>
.togglebox,
.togglebox:checked + iframe {
display: none;
}
.button {
background-color: #eee;
border: 1px solid rgb(118, 118, 118);
border-radius: 3px;
font: 400 13.3333px Arial;
padding: 2px 6px;
}
.button:hover {
background-color: #ddd;
}
.button:active {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<label class="button" for="togglebox">Show or hide</label>
<input class="togglebox" id="togglebox" type="checkbox">
<iframe id="iframe" src="some-url ..."></iframe>
</body>
Hier ist es an eine Checkbox gebundenes Label, welches visuell einen Button vortäuscht (keine Frage, die visuelle Imitation bekommt man sicherlich noch besser hin). Bei Klick de-/aktiviert es die Checkbox.
Zwar ist CSS keine Programmiersprache, die wie JavaScript Anwendungslogik formulieren kann, jedoch bietet die Pseudoklasse :checked die Möglichkeit, einen Selektor zusammenzubauen, der das iframe-Element beschreibt, sobald die Checkbox aktiviert ist. Dann wird er, wie im ersten Beispiel, ausgeblendet.
Für weitere Informationen zu den angeführten Elementen aus Beispiel 1 und 2 würde ich dir das Mozilla Developer Portal als Nachschlagewerk (und auch Quelle für Tutorials zur Webentwicklung) empfehlen.
Versuche mehrere Videos durch verschiedene Knöpfe anzeigen und wieder verschwinden zu lassen.
Für diesen Fall müsste Beispiel 1 abgeändert werden. Zum Beispiel so:
<!-- doctype, etc. -->
<div>
<iframe src="some-url ..."></iframe>
<button class="show-or-hide-button" type="button">Hide</button>
</div>
<div>
<iframe src="some-url ..."></iframe>
<button class="show-or-hide-button" type="button">Hide</button>
</div>
<!-- etc. ... -->
<script>
const showOrHideButtons = document.getElementsByClassName("show-or-hide-button");
for (let i = 0; i < showOrHideButtons.length; ++i) {
const iframe = showOrHideButtons[i].parentElement.querySelector("iframe");
showOrHideButtons[i].addEventListener("click", function() {
iframe.classList.toggle("hidden");
this.innerText = iframe.classList.contains("hidden") ? "Show" : "Hide";
});
}
</script>
<!-- further html ... -->
IDs dürfen nur einmal in einem HTML-Dokument vorkommen, daher würden Button und iFrame hier einfach in eine Box gestopft werden, damit ein eigener für sich abgeschlossener Kontext entsteht. Die Buttons werden mit einem class-Attribut ausgestattet, sodass sie später im JavaScript-Teil leicht abgreifbar sind.
Die for-Schleife geht durch die Liste der gefundenen Buttons und ermittelt je Schritt das richtige iFrame, welches mit dem gerade vorliegenden Button in einer Box liegt und hängt die notwendigen Event Listener an.
Nachtrag:
Meinen Beispielen zufolge wären CSS, JavaScript und HTML immer in einer Datei vereint. So lange CSS- und JavaScript-Code jeweils kurz sind, ist das noch vertretbar, doch wäre eine Auslagerung in einzelne Dateien (z.B. bei Beispiel 2) günstig, um das Projekt flexibler und besser wartbar (übersichtlicher) zu gestalten. Lies dazu mehr in oben erwähnter Referenz zu link- und script-Tag.
Natürlich.
Im ersteren Fall müsste die Logik umgedreht werden. Wenn die Checkbox aktiviert ist, muss der display-Wert auf block gesetzt werden und als initialer Style auf none.
iframe { display: none }
In zweiterem Fall muss die hidden-Klasse dem iFrame von Beginn an zugewiesen werden.
<iframe class="hidden" src="..."></iframe>
Noch ein Nachtrag zur obigen Antwort: Für das zweite Beispiel müsste natürlich noch der hidden-Selektor in CSS definiert werden.
.hidden { display: none }
Man kann das so machen das man den iFrame in eine div packt und diesen dann mit display:none versteckt oder mit display:block anzeigt hier habe ich eine lösung für 2 Videos von Youtube einmal HTML:
<button class="toggle"> Video Anzeigen </button>
<div class="video" style="display:none;">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Lr-hsWcL_ag" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br>
<button class="toggle"> Video Anzeigen </button>
<div class="video" style="display:none;">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Qj2seyOEKG0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Und Javascript in dem fall muss der javascript tag ganz unten stehen:
<script>
var t = document.getElementsByClassName("toggle");
var v = document.getElementsByClassName("video");
t[0].addEventListener("click", function() {
if (v[0].style.display == "none") {
v[0].style.display = "block";
t[0].innerHTML = "Video Verbergen";
} else {
v[0].style.display = "none";
t[0].innerHTML = "Video Anzeigen";
}
})
t[1].addEventListener("click", function() {
if (v[1].style.display == "none") {
v[1].style.display = "block";
t[1].innerHTML = "Video Verbergen";
} else {
v[1].style.display = "none";
t[1].innerHTML = "Video Anzeigen";
}
})
</script>
Zuerst holt der Script sich die Klassen die dann in den Variablen t (toggle) und v (video) gespeichert werden. Da es mehrere klassen geben kann muss man immer eine auswählen [0] ist das erste Video und der erste Knopf und [1] der zwite Knopf und das zweite Video.
Wenn man auf einen Knopf drückt reagiert der EventListener und führt die aktion in den geschweiften klammern aus es prüft ob das Video bereits versteckt ist wenn ja wird es angezeigt. Wenn das Video bereits angezeigt wird wird es beim erneuten klick wieder versteckt.
Musst du mit JavaScript machen. Setzten dann display von none auf block oder wie eben gewünscht.
Und wie mache Ich das? xD Kenn mich wie gesagt überhaupt nicht aus
danke für deine Hilfe! Im großen und ganzen ist es genau das was ich haben wollte. Aber ist es auch möglich die iframes beim ersten laden der Seite erst versteckt und dann durch einen Klick anzeigen zu lassen?