Wie kann ich mit Java-Script einen anderen Iframe-Inhalt laden?
In diesem Artikel wollen wir uns mal anschauen, wie wir mittels Knopfdruck in einer HTML-Seite den Iframe austauschen können. Hier wollen wir zwischen zwei Formularen hin und her schalten, ein Design-Wechsel zwischen dunklem und hellem Theme.
Unser Projekt sieht so aus:
Wir haben unsere Hauptdatei, diese enthält den folgenden Code:
<iframe id="myframe" src="light.html" width="500" height="500"></iframe>
<button onclick="changeSrc('dark')">Dark Mode</button>
<button onclick="changeSrc('light')">Light Mode</button>
<script>
function changeSrc(mode) {
document.getElementById("myframe").src = mode + ".html";
}
</script>
Gehen wir dies durch. Wir haben hier unseren Iframe, dieser zeigt standardmäßig das helle Theme an. Dann zwei Buttons, welche die Java-Script-Funktion aufrufen. In der Funktion setzen wir, anhand des Übergabe-Parameters die neue Datei.
Auf dem eigenen Webspace funktioniert dies in der Regel ohne Probleme. Externe URLs lassen sich einbinden, allerdings kann der externe Server entscheiden, ob es erlaubt ist. Falls nicht wird die Anzeige blockiert.
