# Dynamische Höhe [Iframe]



## SebiPuck (20. August 2012)

Hallo, 
ich wollte mein Forum in meine Website integrieren. Mein Problem: Ich brauche ein IFrame mit dynamischer Höhe.
Ich verwende kein CMS wie Wordpress etc. 
Meine Frage ist nun, wie ich so etwas mache. (Suchfunktion hat nicht wirklich geholfen).
wenn ich javascripts verwenden will, dann wird der Script immer angezeigt, aber er "macht" nichts.
Ich hoffe, dass ich hier richtig bin


----------



## sheel (20. August 2012)

Hi

die Scriptbefehle werden auf der Seite angezeigt?
Hast du sie überhaupt in <script> verpackt?
Code bitte.


----------



## SebiPuck (20. August 2012)

ja die Befehle werden angezeigt das waren aber Codes welche ohnehin nicht so rihtig funktioniert hätten. Ich brauche zuerst einen Code, welcher solch eine Funktion hat.


----------



## tombe (20. August 2012)

Also erstmal generell was zu deinem Skript:
Wenn der Code angezeigt und nicht ausgeführt wird, dann ist er nicht richtig eingebunden (behaupte ich mal).
Zeig mal ein bisschen was von der Seite damit man sich was darunter vorstellen kann.

Die nächste Frage ist wovon ist die Höhe des IFrames abhängig und kannst du nicht mit prozentualen Angaben arbeiten?


----------



## SebiPuck (20. August 2012)

Also, ich habe den Script jetzt nicht mehr drin. Aber das ist der Link zur Seite: http://terados.de/board.html .
Die höhe des Frames sollte hiervon abhängig sein: http://terados.de/Forum/index.php?page=Index

Wie schaffe ich dass ?


----------



## tombe (21. August 2012)

Schau mal ob du das hier für dein Vorhaben umsetzen kannst:


```
<script language="javascript" type="text/javascript">
function hoehe() {
if(document.readyState != "complete") {
	window.setTimeout(hoehe, 100);
    return false;
}

document.getElementById("iframe").style.height = document.getElementById("iframe").contentWindow.document.getElementById("div").offsetHeight;
}
</script>

<body onload="hoehe();">

<p>Das hier ist der normale Bereich auf der Seite.</p>
<iframe id="iframe" src="iframe.html" style="width: 500px; height: auto;"></iframe>

</body>
```

Der Inhalt der Seite die in den IFRAME eingebunden wird ist innerhalb eines DIV-Containers mir der ID "div" platziert.

Das Javascript prüft ob die Seite komplett geladen wurde, ermittelt dann die Höhe des DIV-Containers und weißt sie dem IFRAME zu.


----------



## SebiPuck (21. August 2012)

So, mit exakt dem Script sieht das ganze so aus:

http://terados.de/board.html

geht irgendwie nicht so ganz. man sollte ja quasi garnicht merken, dass es ein iframe ist.
Also muss ich auch irgendwie den Scrollbalken entfernen mit scrolling="no" oder so)
Das mit der Höhe geht auch nicht so richtig.


----------



## tombe (21. August 2012)

Also du bist jetzt einfach hergegangen und hast den Code von mit kopiert und auf deiner Seite eingefügt.
Dabei hätte dir zumindest auffallen müssen das du das BODY-Tag mit kopiert hast! Das kann ja so nicht klappen, da die JS-Funktion so gar nicht aufgerufen wird.

Auf der Forum-Seite habe ich jetzt nicht geschaut ob du da einen DIV-Container mit der entsprechenden ID hast. Hast du?


----------



## SebiPuck (21. August 2012)

Wie ist das mit dem Div container genau gemeint ? ich habe den body tag nun entfernt -> selbes Problem

Kann ich denn nicht einfach bei der Höhe auch mit Prozenten arbeiten ? Ich will ja nur, dass das Iframe sich immer anpasst, wenn ich z.b. Im Forum auf n Beitrag gehe etc.....


----------



## tombe (21. August 2012)

In meinem Beispiel steht der Text welcher in dem IFRAME dargestellt werden soll in einem DIV-Container und von diesem DIV wird die Höhe ermittelt.

Damit der Code funktioniert muss es bei dir ebenfalls einen "Behälter" mit der entsprechenden ID geben! Prozente angeben bringt nichts, da du ja keine Bezugsgröße hättest.

Wenn du den doppelten BODY entfernt hast, hast du dann den JS-Funktionsaufruf beim eigentlichen BODY eingetragen?

*NACHTRAG:*
Ändere bei dir mal die ID in "tplIndex" um. Das ist in der "Forums-Seite" die ID des BODY-Tags. Dann wird die Höhe damit ermittelt.


Müsste dann so aussehen:


```
document.getElementById("iframe").style.height = document.getElementById("iframe").contentWindow.document.getElementById("tplIndex").offsetHeight;
```


----------



## djheke (21. August 2012)

Wnn es mit ein iframe nicht klappt , dann ist hier noch eine Alternative:
http://www.gipspferd.de/css/anleitung/a8/a8.php


----------



## SebiPuck (23. August 2012)

Ich verstehe es nicht. Ich kenn mich grade garnicht aus. Könnten sie mir eventuell ganz genau mal sagen, wie es funktioniert ? Bzw. den fertigen Code geben ? Wäre echt super,d a ich nun schon seid längerem mit den vorhandenen Infos von ihnen versuche zu arbeiten, leider gelingt es mir nicht


----------



## tombe (23. August 2012)

Mal abgesehen davon das hier (eigentlich) alle per Du sind, wenn von uns meinst du jetzt?

Ich kopiere dir hier mal einen kleinen Abschnitt rein. Suche bei dir den entsprechenden Code und tausche es gegeneinander aus.
So wie es aussieht hast du bei der JS-Funktion auch einen Fehler drin. Es fehlt am Ende der Funktion die schließende, geschweifte Klammer. Das wird auch der Grund sein warum bei dir nichts passiert.


```
<div id="content">

<script language="javascript" type="text/javascript">
function hoehe() {
	if(document.readyState != "complete") {
    	window.setTimeout(hoehe, 100);
    	return false;
	}

	document.getElementById("iframe").style.height = (document.getElementById("iframe").contentWindow.document.getElementById("tplIndex").offsetHeight + 50);
}
</script>

<body onload="hoehe();">

<iframe id="iframe" frameborder="0" scrolling="auto" src="http://terados.de/Forum/index.php" style="width: 100%; height: auto;"></iframe>

<div id="post-navigator"></div>

</div>
```

Mit der Originaldatei die im IFRAME dargestellt werden soll kann ich es bei mir leider nicht testen da der Zugriff auf "fremde" Dateien ja nicht möglich ist. Denke aber trotzdem das es so geht.


----------



## djheke (23. August 2012)

Mit JS wird es wohl nichts werden.Denn wenn ein Link im iframe angeklickt wird , wird das JS doch nichtmehr ausgeführt. Oder doch?

Besser ist aber seinen Header,Navi und Footer in das Forum einzubinden.


----------



## SebiPuck (23. August 2012)

So, ich habe es jetzt mi genau dem Code versucht. Das mit der Höhe geht jedoch nicht...

Link: http://terados.de/board.php


----------



## djheke (24. August 2012)

Hab da was gefunden und es funktioniert auch. Zumindestens im FF + Chrome.
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

@edit: Hier ist noch ein Einzeiler und es funktioniert.

```
Script im Head-Bereich

<script type="text/javascript">
function hoehe() {
document.getElementById("myframe").height = document.getElementById("myframe").contentWindow.document.body.offsetHeight;
}
</script>
```


```
Im Body-Bereich

<iframe  src="url" id="myframe" width="960" marginheight="0px" marginwidth="0px" frameborder="0" scrolling="no" onload="hoehe()"; >
```

Hier Live zu testen.
http://www.gipspferd.de/iframe.htm


----------

