nicht angemeldet
Höhe eines Iframes variabel gestalten!
Hi, ich möchte ín einem Iframe html Dateien aufrufen, möchte aber keinen Scrollbalken im Iframe. Da die HTML-Dateien unterschiedlicher Länge sind, muss ich also die Höhe irgendwie mit Javascript ermitteln und dann den Wert an height=... übergeben. Hab da schon ein paar Brocken zusammen, kann mir aber keinen genauen Reim draus machen. Wo muss ich folgende Zeile hinschreiben (in welchen Header?) und wie übergebe ich den Wert an height? height=hoehe? da muss doch bestimmt irgendwas in Hochkomma oder so.
<script>
function groesse(hoehe)
{
document.getElementById('iframe').height = hoehe
}
</script>
-
Hallo Michel,
witzig, da hat gestern schon mal jemand ein ganz hnliches Problem gehabt wie du und ich habe auch darauf geantwortet:
https://forum.selfhtml.org/?t=86677&m=513181
Statt über setAttribute() kannst du die Höhe deines iframes wohl auch über die CSS-Angaben dynamisch verändern:
document.getElementById('iframe').height = hoehe
da fehlt dann aber noch style. dazwischen und "px" dahinter also:
document.getElementById('deinIframe').style.height = hoehe + 'px';
Gruß Gernot
-
Tja, wie der Zufall so will
Statt über setAttribute() kannst du die Höhe deines iframes wohl auch über die CSS-Angaben dynamisch verändern:
Hmm, also steht das dann in der .css-Datei oder wie?
document.getElementById('deinIframe').style.height = hoehe + 'px';
Wie soll das funktionieren? ich hab da ein bisschen Verständnisprobleme. Das ganze soll ja automatisch ablaufen, ich will da nicht jedes mal eine andere Höhe eingeben müssen. Also nochmal meine Vorstellung: Ich ermittle die Höhe meiner Datei mit offsetHeight (das rufe ich im body mit onload auf). Jetzt ha ich die Höhe und muss sie wohin übergeben?
Das hört sich wirklich gut an, hol mal bitte ein bisschen weiter aus, bin in Sachen Javascript absoluter Anfänger...
-
Hallo
Statt über setAttribute() kannst du die Höhe deines iframes wohl auch über die CSS-Angaben dynamisch verändern:
Hmm, also steht das dann in der .css-Datei oder wie?
Nein, eine externe CSS-Datei brauchst du dafür nicht. Du kannst Styles innerhalb des Dokuments entweder im Head-Bereich definieren, oder auch inline. Für dein Problem brauchst du zuerste einmal aber überhaupt keine CSS-Angaben, sondern ür die entsprechenden Elemente nur ID-Attribute. Wenn du die vergeben hast kannst du CSS-Angaben auch nachträglich mit JavaScript verändern oder auch überhaupt erst setzen.
Was du brauchst ist zuerst einmal in allen HTML-Dokumenten, die du im IFRAME einblenden willst, ein alles umschließendes DIV-Element, dem du immer wieder dieselbe ID gibst z.B. id="inhalt".
Damit der Inhalt sich auch ohne Rand über den ganzen Body erstreckt, solltest du auch noch im Body schreiben <body topmargin="0" leftmargin="0" marginheight="0" und marginwidth="0">
Letzte beiden Attribute sind zwar nicht valide, wirken aber auch in mozilla-basierten Browsern. Du kannst es aber auch mit style="margin:0px;padding:0px" im Body-Tag versuchen, das sollte auch wirken.
Dein IFRAME-Tag in der übergeordneten Seite bekommt auch ein ID-Attribut verpasst, damit du es später mit JS ansprechen kannst, z.B. sieht das dann so aus
<iframe src="eineDatei.html" id="meinIframe" onLoad="anpassen()"></iframe>
Im Head-Bereich deiner übergeordneten Seite definierst du die Funktion:
function anpassen(){
document.getElementById('meinIframe').style.height = document.getElementById('meinIframe').document.getElementById('inhalt').offsetHeight + 'px'; //alles in einer Zeile!
}Viellecht gibst du sicherheitshalber noch ein paar Pixel an der Höhe hinzu, damit auch tatsächlich kein Scrollbalken im IFRAME entsteht. Wenn du das machst, kannst du innerhalb des Iframes auch vielleicht doch noch einen gewissen Abstand vom Rand einhalten.
Du kannst aber auch im IFRAME zusätzlich scrolling="no" schreiben, um den scrollbalken zu unterdrücken.
Das ist alles Theorie, ich habe es nicht getestet, funktioniert vielleicht auch nicht in allen Browsern, aber probier's doch mal aus und berichte, du hast ja die Dateien schon und musst sie nur noch ein bisschen anpassen.
Ich hätte sonst auch noch andere Ideen, wenn's in einigen Browsern Probleme gibt, wie man das vielleicht dort regeln könnte.
Gruß Gernot
-
Hallo nochmal,
mir fällt gerade ein:
Das Style-Attribut solltest du in deinem IFRAME auch schon einmal anlegen, musst aber nicht schon unbedingt etwas zur Höhe schreiben style="" (leere Zeichenkette), vielleicht ist aber auch das besser style="height:200px;":
<iframe src="eineDatei.html" id="meinIframe" style="height:200px" onLoad="anpassen()"></iframe>
Ohne das Style-Attribut wirds sonst womöglich schwierig, mit der funktion darauf zuzugreifen.
Gruß Gernot
-
Jo, das war mehr als ausführlich, vielen Dank schon mal, ich werds testen. ich sag die dann bescheid...
-
Habs probiert, bekomme eine fehlermeldung: Objekt erforderlich!
<script>
function anpassen()
{
document.getElementById('iframe').style.height = document.getElementById('iframe').document.getElementById('inhalt').offsetHeight + 'px';
}</script>
<body>
<table width="100%" border="0">
.
.
.<td>
<iframe id="iframe" frameborder ="0" scrolling=no name="show" width="730" style="height:5px" onLoad="anpassen()"></iframe>
</td>
</tr>
</table>
</body>Source habe ich nicht angegeben, weil anfangs nichts geladen werden soll. Navi steht in einem Flash-Teil in der Tabelle.
Die Datei selbst:
<body>
<div id=inhalt>
<table border="0" width="730">
<tr>
<td id=h1>Spanien, Teneriffa</td>
</tr>
</table>
</div></body>
-
Hallo
Source habe ich nicht angegeben, weil anfangs nichts geladen werden soll.
Das ist klar, dass dann eine Fehlermeldung kommt, du musst anfänglich etwas laden und sei es auch nur eine leere Datei, in der im Body nichts weiter steht als das DIV-Element mit der ID="inhalt".
<div id="inhalt"></div>Das ist nämlich dein ansonsten fehlendes Objekt.
Wenn das DIV-Element leer ist wie hier in dem Beispiel, gibt es den offsetHeight-Wert 0 zurück, das brauchst du, damit entsprechend dein IFRAME in der Höhe auch auf 0 gesetzt werden kann, sonst gibt es die Fehlermeldung.
Gruß Gernot
-
Sorry, hatte vergessen zu erwähnen, dass ich natürlich beides ausprobiert hatte, aber selbst mit der Source findet er das Objekt nicht...
-
Also jeden den es interessiert:
function anpassen()
{
document.getElementById('iframe').style.height = frames['iframe'].document.getElementById('inhalt').offsetHeight + 'px';
}ist die richtige Funktion für den IE nochmal ein dickes Danke an Gernot
-
-
-
-
-
-
-
hi,
witzig, da hat gestern schon mal jemand ein ganz hnliches Problem gehabt wie du
dieses "problem" taucht hier auch alle zwei oder drei wochen auf.
so witzig finde ich es allerdings gar nicht, dass offenbar so viele leute probleme haben, das konzept von frames zu verstehen, und sie dann für so einen unfug missbrauchen wollen - wo eine serverseitige lösung doch eigentlich die einzig akzeptable variante wäre.
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.-
Hallo Wahsaga,
wo eine serverseitige lösung doch eigentlich die einzig akzeptable variante wäre.
Bestimmt hast du Recht, dass es serverseitig programmiert eleganter wäre, aber weißt du, damit kann ich auch nicht umgehen, ist mir zu umständlich, nicht einfach so wie bei Phase 5 für die Vorschau mal schnell auf "F9" drücken zu können. Hab es auch bisher noch nicht geschafft, überhaupt Apache zu installieren. Mit den krassesten Klimmzügen über Javascript komme ich eher zurecht. Dafür bin ich darin jetzt ganz gut.
Gruß Gernot
-
-