HTML: URL eines iFrame per Javascript ändern

iFrames sind praktische kleine Erfindungen in HTML: Damit lassen sich Inhalte von einer anderen Seite auf der aktuellen Seite anzeigen. Das zeigen wir zum Beispiel in diesem Smart Home Artikel: Während auf dem Bildschirm die Übersicht des Smart Home Servers angezeigt wird, sorgen kleine iFrames oben links und rechts dafür, Datum und Uhrzeit anzuzeigen.

<iframe name="zwei" id="zwei" src="zwei.html"></iframe>

Ein iFrame sollte einen Namen und eine ID besitzen: Das ist wichtig, um seinen Inhalt von außen zu steuern. Möchte man in dem Hauptframe der Webseite einen Link platzieren, der sich in einem iFrame öffnet, braucht man dafür den Namen: Dieser wird mit dem Attribut “target” angesprochen:

<a href="drei.html" target="zwei">Link</a>

Der Inhalt der Datei “drei.html” wird bei Klick auf den Link in dem iFrame geladen: Der Hauptframe verändert sich nicht. Das funktioniert, weil der iFrame mit dem Attribut “name” einen Namen bekommen hat: Diesen kann man im Link mit “target” als Ziel auswählen.

Javascript: URL eines iFrame ändern

Aber auch per Javascript lässt sich der Inhalt und die URL des iFrame ändern: Statt dem Name nutzt man dafür die ID:

document.getElementById('zwei').src = 'drei.html';

Das funktioniert zum Beispiel per onclick-event in einem Link:

<a href="#top" onclick="document.getElementById('zwei').src = 'drei.html';">Link</a>

Das Laden eines Inhalts in einen iFrame funktioniert aber auch sonst zum Beispiel in einer JavaScript Funktion:

<script type="text/javascript">
function iframelink() {
   document.getElementById('zwei').src = 'drei.html';
}
</script>