Iframe-Höhe dynamische anpassen.
0 1 
molily
0
Iframe-Höhe dynamische anpassen.
Hallo,
ich erstelle gerade eine Seite, in der innerhalb einer Tabelle links eine Navigation und rechts das Hauptfeld dargestellt wird.
Im Hauptfeld befindet sich ein Iframe.
Nun soll mittles Javascript-Funktion die Höhe des Iframes dynamisch an den jeweiligen Inhalt (der über die Navigation in der linken Spalte aufgerufen wird) angepasst werden. Sinn und Zweck des ganzen ist, dass im Iframe kein vertikaler Scrollbalken mehr aufscheint. Hierzu habe ich folgende Konstruktion gebastelt, die aber leider NICHT bei Mozilla funktioniert.
Problem: Weiß jemand, was ich ändern muss muss, damit dies auch bei Mozilla & Co. funktioniert?
//***Konstruktion***
<script type="text/javascript">
function anpassen()
{
document.getElementById('iframe').style.height = frames['iframe'].document.getElementById('inhalt').offsetHeight + 'px';
}
</script>
...
<iframe src="inhalt.html" id="iframe" height="160" scrolling="no" width="468" onLoad="anpassen()"></</iframe>
....
Wobei sich "inhalt" auf die einzubindende Datei bezieht die folgendermaßen aussieht:
<body>
<div id="inhalt">
<table height="800" border="0" width="730">
<tr>
<td bgcolor="pink">Spanien, Teneriffa</td>
</tr>
</table>
</div>
</body>
Danke,
Honda
-
hi,
ich erstelle gerade eine Seite, in der innerhalb einer Tabelle links eine Navigation und rechts das Hauptfeld dargestellt wird.
Im Hauptfeld befindet sich ein Iframe.Warum machst du sowas noch - heutzutage?
Warum kein sauber strukturiertes HTML-Dokument?Nun soll mittles Javascript-Funktion die Höhe des Iframes dynamisch an den jeweiligen Inhalt (der über die Navigation in der linken Spalte aufgerufen wird) angepasst werden. Sinn und Zweck des ganzen ist, dass im Iframe kein vertikaler Scrollbalken mehr aufscheint.
Du willst also mit Javascript ein Iframe-"Problem" lösen, welches du ohne Iframe gar nicht hättest - erscheint dir das sinnvoll?
(Darüber hinaus bringen (i)frames ja noch weitere Probleme mit sich - also warum eine Seite ohne Not derart verschlechtern?)Hierzu habe ich folgende Konstruktion gebastelt, die aber leider NICHT bei Mozilla funktioniert.
Problem: Weiß jemand, was ich ändern muss muss, damit dies auch bei Mozilla & Co. funktioniert?Nein - "funktioniert nicht" ist immer noch keine brauchbare Problembeschreibung.
document.getElementById('iframe').style.height = frames['iframe'].document.getElementById('inhalt').offsetHeight + 'px';
Warum verwendest du hier zwei unterschiedliche Notationen zum Zugriff auf das gleiche Element?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
document.getElementById('iframe').style.height = frames['iframe'].document.getElementById('inhalt').offsetHeight + 'px';
Warum verwendest du hier zwei unterschiedliche Notationen zum Zugriff auf das gleiche Element?
Da irrst du dich, diese Notationen greifen nicht auf dasselbe Objekt zu.
document.getElementById('iframe') liefert einen Elementknoten, soweit korrekt. Die Frage war: Wie kommt man jetzt vom Elementknoten zum Dokument darin? Die Lösung ist erst einmal nicht relevant, es kann nur festgestellt werden, dass frames['iframe'] etwas anderes anspricht als document.getElementById('iframe').
Während document.getElementById('iframe') den Elementknoten liefert, liefert frames['iframe'] nämlich das window-Element des Dokuments im Iframe (jedes Fenster bzw. jeder Frame und Iframe hat bekanntlich ein eigenes window-Objekt). Das ist etwas völlig anderes. document.getElementById('iframe').style funktioniert, frames['iframe'].style würde nicht funktionieren. frames['iframe'].document funktioniert, document.getElementById('iframe').document würde nicht funktionieren. Insofern ist obiger Code durchaus sinnig.
Trotzdem hast du recht, hier liegt eine ziemliche Vermischung vor. Der Pseudo-Array window.frames speichert die window-Referenzen, er kommt aus Netscapes JavaScript und kommt im W3C-DOM nicht vor (dort gibt es kein »window«, weil das DOM keine Ausführungsumgebung definiert). getElementById kommt hingegen nicht im klassischen JavaScript vor, dort spielen iframe-Elementknoten keine Rolle.
Trotzdem gibt es eine Verknüpfung zwischen DOM und dem Dokument im iframe: contentDocument.
Man könnte also schreiben:
var elem_iframe = document.getElementById('iframe'); elem_iframe.style.height = elem_iframe.contentDocument.getElementById('inhalt').offsetHeight + 'px';Das unterstützen meines Wissens aber nur einige Browser.
MSIE bietet zudem eine proprietäre Eigenschaft, mit der man vom Elementknoten zum window-Objekt kommt: contentWindow. Zumindest Gecko kennt diese auch.
Mathias
-
-
Hallo Honda,
function anpassen()
{
document.getElementById('iframe').style.height = frames['iframe'].document.getElementById('inhalt').offsetHeight + 'px';Das document des Iframes kannst du ansprechen mit frames['NameDesIframe'].document... oder noch einfacher mit NameDesIframe.document... . Bei dir sehe ich aber keinen Namen, sondern nur eine Id.
<iframe src="inhalt.html" id="iframe" height="160" scrolling="no" width="468" onLoad="anpassen()"></</iframe>
Das doppelte </ ist sicher nicht hilfreich. Wird denn anpassen() aufgerufen (onload gibt es eigentlich nur für <body> und <frameset>)? Testen kannst du das, indem du einen alert in die Funktion schreibst. Wenn ja, gehe weiter auf Fehlersuche:
Was sagt die Javascript-Konsole?
alert(document.getElementById('iframe'));
alert(NameDesIframe.document);
alert(NameDesIframe.document.getElementById('inhalt'));
alert(NameDesIframe.document.getElementById('inhalt').offsetHeight);
usw.Grüße,
Stefan