[JavaScript] Iframehöhe dynamisch ändern

Dieses Thema im Forum "Webentwicklung" wurde erstellt von MasterJulian, 6. Februar 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 6. Februar 2011
    Iframehöhe dynamisch ändern

    Ich möchte, dass sich mein Iframe in der Höhe anpasst, wenn ich eine neue Datei rein laden. Ich habe hierzu folgendes Script gefunden:
    Code:
    <script language="JavaScript">
<!--
function calcHeight()
{
 //find the height of the internal page
 var the_height=
 document.getElementById('mainfrm').contentWindow.
 document.body.scrollHeight;

 //change the height of the iframe
 document.getElementById('mainfrm').height=
 the_height + 50;
}
//-->
</script>
    Das funktioniert wunderbar, bis auf Tabellen. Hier mal ein einfacher Test:

    index.html
    Spoiler
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script language="JavaScript">
<!--
function calcHeight()
{
 //find the height of the internal page
 var the_height=
 document.getElementById('mainfrm').contentWindow.
 document.body.scrollHeight;

 //change the height of the iframe
 document.getElementById('mainfrm').height=
 the_height + 50;
}
//-->
</script>
</head>

<body>
<p><a href="tabelle.html" target="mainfrm">Tabelle</a> | <a href="text.html" target="mainfrm">Text</a><p>
 <iframe src="text.html" id="mainfrm" name="mainfrm" frameborder="0" width="100%" onLoad="calcHeight();">
 <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>
    text.html
    Spoiler
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

</head>

<body>
<p>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla
</br>Bla Bla Bla Bla Bla Bla Bla Bla</p>
</body>
</html>
    tabelle.html
    Spoiler
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabelle</title>
</head>
<body>
 <h1>Eine Tabelle</h1>
 <table border="1" style="float:left; margin-left:15px; margin-top:0px" class="sample">
 <tr>
 <th scope="col">Bla</th>
 <th scope="col">Bla</th>
 </tr>
 <tr>
<td>Bla</td>
<td>Bla</td>
</tr><tr>
<td>Bla</td>
<td>Bla</td>
</tr><tr>
<td>Bla</td>
<td>Bla</td>
</tr><tr>
<td>Bla</td>
<td>Bla</td>
</tr><tr>
<td>Bla</td>
<td>Bla</td>
</tr><tr>
<td>Bla</td>
<td>Bla</td>
</tr>
 </table>

</body>
</html>
    Nur im IE funktioniert das. Jemand eine Idee wie ich den Code abändern muss, sodass auch bei Seiten mit Tabellen die richtige Höhe angepasst wird?
     
  3. 6. Februar 2011
    AW: Iframehöhe dynamisch ändern

    Wozu "float:left;" ?

    Sonst mach unter die Tabelle: <div style="clear:left"></div>
     
  4. 6. Februar 2011
    AW: Iframehöhe dynamisch ändern

    Das Tabellendesign habe ich mit irgend so nem script generiert. Webdesign ist nich so meins. Das mit dem <div style="clear:left"></div> funktioniert 1A. Danke
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.