iFrame Werte aus iFrame selber ändern: Größe, Höhe, Breite…

Ein iFrame ist ein viereckiger Bereich einer Webseite, der eine eigene HTML-Seite als Inhalt hat. Die kann von fremden Seiten kommen, wie zum Beispiel ein eingebettetes YouTube Video, aber auch von eigenen Seiten: So haben wir für den Smart Home Server FHEM die zusätzlichen Menüs zum Beispiel mit iFrames über einen Hintergrund gelegt.

Das kann aber problematisch sein, wenn der iFrame – wie in unserem Menü-Beispiel – andere Inhalte auf der Webseite verdeckt. Bei dem Beispiel sollte er per Klick “ausfahren” und sich vergrößern, ein erneuter Klick soll dann dafür sorgen, dass der iFrame wieder kleiner wird und nicht mehr die anderen, unten liegenden Teile der Webseite verdeckt.

Aus Sicherheitsgründen funktioniert dies in den meisten Browsern aber nur, wenn sowohl die iFrame-Seite als auch die Seite, die den iFrame aufruft, auf der gleichen Webadresse liegen.

iFrame Werte aus dem iFrame selbst heraus verändern – so geht’s!

Man kann jedem Element einer Webseite mit den Style-Attributen Werte zuweisen – auch nach einer Aktion mit Javascript: Ein Klick startet eine Javascript Funktion, die dann nachträglich Style-Attribute ändert: So lässt sich zum Beispiel die Größe anpassen oder die Sichtbarkeit (“visibility”), aber auch einfach nur eine Farbe.

Man spricht ein Element auf der Web-Seite über eine eindeutig vergebene ID an, zum Beispiel in einem DIV oder iframe: <iframe id=”frame”>

var layer = document.getElementById("frame");

Jetzt kann man die Style-Attribute beliebig verändern, zum Beispiel Größe und Sichtbarkeit:

layer.style.height=0;
layer.style.visibility="hidden";

Aus einem iFrame kann man so die Werte des iFrames, also zum Beispiel Höhe, Breite, Sichtbarkeit oder z-index, nicht ändern: Dazu muss man zunächst mit “parent” auf das nächsthöhere Dokument wechseln, dass den iFrame enthält:

var iframe = window.parent.document.getElementById("frame");

Jetzt kann man auch hier die Style Attribute des iFrame, auch direkt aus dem iFrame selbst heraus, ändern:

<script type="text/javascript">
var menuon = 0;

function menu() {
  var iframe = window.parent.document.getElementById("frame");

  if(menuon == 1) {
     iframe.style.height="10";
     menuon = 0;		
  } else {	
     iframe.style.height="76px";
     menuon = 1;
  }	
}
</script>

Jetzt kann man mit einem Button die Funktion menu() aufrufen, die dann den iFrame in der Größe ändert – auch, wenn der Button, der die Funktion zum Ändern aufruft, sich in dem iFrame selbst befindet.