Kalle_B: iframe-Höhe an Inhalt anpassen - Lösung gefunden

Beitrag lesen

Hallöle,

endlich klappt es - ein iframe passt sich der Höhe des Inhalts an, auch wenn das Dokument im iframe von einer fremden Domain kommt. Allerdings nur in dem Sonderfall, dass der Inhalt mitspielt und seine Höhe meldet:
Veranstaltungskalender

Das rufende Dokument (das mit dem iframe) ist http://osmer.de/termine.php, im Folgenden *osmer* genannt (PHP wird hier nur zum Einbinden des Menüs gebraucht, hat nichts mit unserem Thema zu tun).

Das gerufene Dokument (im iframe) ist zunächst http://remso.de?ORT=9669&OT=1&lg=de2, im Folgenden *remso* genannt.

In *osmer* können Links angeklickt werden, um andere Inhalte von *remso* in das iframe zu laden. Jedesmal wird die iframe- Höhe angepasst.

Konzept:
--------
*remso* bestimmt seine Höhe und meldet die per Ajax an seinen eigenen Server. Der erstellt ein GIF- Bild mit dieser Höhe und legt es als Datei ab. Nach einer gewissen Verzögerungszeit liest *osmer* dieses Bild von *remso* und macht das iframe so hoch wie das Bild.

Einzelschritte:
---------------
1. *osmer* bestimmt einen zufälligen Namen für das Bild, damit mehrere Benutzer unabhängig arbeiten können:
var gif_name = 'img' +Math.random();
und übergibt den als Parameter an den iframe- Source.

2. *remso* lädt sich in den iframe und bestimmt unmittelbar vor dem </body> seine eigene Höhe:

<div id=ganzunten></div>  
<script type="text/javascript">  
  var gif_hoehe  = document.getElementById('ganzunten').offsetTop;  

3. *remso* ruft per Ajax ein Programm auf seinem eigenen Server, das unter Verwendung des Bildnamens ein Bild mit der gewünschten Höhe erzeugt:

  var programm = "http://remso.de/gif_create.php?gif_name=[gif_name]&breite=" +gif_breite +"&hoehe=" +gif_hoehe;  

... und auf dem remso- Server als Datei speichert:

  $resource = imagecreate( $arr_in['breite'], $arr_in['hoehe'] ); // x, y  
  imagegif ( $resource, $arr_in['gif_name'].'.gif' );  

4. *oamer* liest nach einem Timeout von 3 sec. (wg. *remso* laden und Bild erzeugen) dieses Bild und gibt dessen Höhe an den iframe weiter:

<script type="text/javascript">  
var gif_name = 'img' +Math.random();  
var gif_nr   = 0;  
function frameHoehe()  
{  
  var p591_img = new Image();  
  gif_nr++;  
  p591_img.src = "http://remso.de/" +gif_name +".gif?nr=" +gif_nr;  
  ...  
  document.getElementById( 'remsoframe' ).style.height = p591_img.height;  

Und das Prozedere kann nacheinander für mehrere *remso* durchgespielt werden.

Lieben Gruß und danke für die Unterstützung,
Kalle