IFrame anpassen

[Mauz]

Moin Moin,

ich weiß, meine folgende Frage wurde schon des öfteren hier im Forum gestellt. Leider helfen mir die bereits bestehenden Threads und die Javascript Dokumentation von SelfHTML nicht viel weiter, vielleicht bin ich auch nur zu dumm...

Nun gut, ich möchte die Höhe eines bestimmten Inhaltes der Iframe, der Höhe der Iframe anpassen. Dazu habe ich mir diesen Code aus der JS-Docu zusammengeschnipselt:

  
function dynfrm() {  
 iframe = document.getElementById('myIframe');  
 content_iframe = parent.myIframe.document.getElementById('div_elem');  
 iframe.style.height = content_iframe.offsetHeight + 'px';  
}  

Funktioniert im IE wunderbar, Im Firefox nicht!
Schade das es keinen Hinweiß in der JC-docu gibt, was die nicht Funktionalität in anderen Browsern angeht.

Würde mich freuen wenn ihr mir weiter helfen könntet.

Danke und beste Grüße aus Heidelberg

[wahsaga]

hi,

ich weiß, meine folgende Frage wurde schon des öfteren hier im Forum gestellt.

ja, zuletzt erst gestern - https://forum.selfhtml.org/?t=111584&m=702882

Leider helfen mir die bereits bestehenden Threads und die Javascript Dokumentation von SelfHTML nicht viel weiter

und in wie fern nicht?

Funktioniert im IE wunderbar, Im Firefox nicht!
Schade das es keinen Hinweiß in der JC-docu gibt, was die nicht Funktionalität in anderen Browsern angeht.

die javascript-konsole des FF teilt dir sicher gerne mit, welche code-teile sie für fehlerhaft hält.

gruß,
wahsaga

[Gernot Back]

Hallo Mauz,

Funktioniert im IE wunderbar, Im Firefox nicht!
Schade das es keinen Hinweiß in der JC-docu gibt, was die nicht Funktionalität in anderen Browsern angeht.

Ich habe es wie folgt gelöst:

http://www.sprachlernspiele.de/scroll/adaptframe.html

Gruß Gernot

[Mauz]

Hallo Gernot,

Ich habe es wie folgt gelöst:

http://www.sprachlernspiele.de/scroll/adaptframe.html

für einen Anfänger wie mich, etwas schwer zu verstehen.

Hast Du vielleicht ein Beispiel ohne Buttons?

Gruß
Mauz

[Gernot Back]

Hallo Mauz,

http://www.sprachlernspiele.de/scroll/adaptframe.html

für einen Anfänger wie mich, etwas schwer zu verstehen.

Hast Du vielleicht ein Beispiel ohne Buttons?

Buttons, was für Buttons?

Ich habe da drei Links, auf denen rechts neben dem Iframe "leer", "mittel" und "voll" steht, damit du beobachten kannst, wie sich die Höhe des Iframes an den Platzbedarf wechselweise darin eingebundener Dokumente anpasst. Ich dachte das ist genau das Thema!

Gruß Gernot

[Mauz]

Hallo,

Ich habe da drei Links, auf denen rechts neben dem Iframe "leer", "mittel" und "voll" steht, damit du beobachten kannst, wie sich die Höhe des Iframes an den Platzbedarf wechselweise darin eingebundener Dokumente anpasst. Ich dachte das ist genau das Thema!

Ich meinte natürlich die Links, sry!
Ich komm nur mit Deinem Code nicht zurecht, die Verlinkung verwirrt mich etwas. In meinem Projekt wird der Inhalt der Iframe innhalb der Iframe verändert, nicht wie bei Dir, außerhalb der Iframe.

Also so wie ich das jetzt verstanden habe, gibt es keine allgemeine Lösung für alle Browser, richtig? Deswegen hast Du auch eine Browserweiche verwendet?

Noch mal zurück zu meinem Beispiel:

  
function dynfrm() {  
 iframe = document.getElementById('myIframe');  
 content_iframe = parent.myIframe.document.getElementById('div_elem');  
 iframe.style.height = content_iframe.offsetHeight + 'px';  
}  

die Variable content_iframe wird mit paretn.myIframe... zugewiesen, und diese Zuweisung funktioniert nur im IE, denke ich. Ich brauchte jetzt quasi eine Zuweisung dieser Variable für alle Nicht-IE.

Ich habe Dein Beispiel versucht für meines tauglich zu machen, ich versteh deinen Code leider nicht all zu gut, da ich auch kaum Erfahrung in Sachen Javascript habe.

Gruß
Mauz

[Gernot Back]

Hallo Mauz,

Also so wie ich das jetzt verstanden habe, gibt es keine allgemeine Lösung für alle Browser, richtig? Deswegen hast Du auch eine Browserweiche verwendet?

Diese Browserweiche dient eigentlich nur dazu; auch noch den IE4 zu bedienen.

  
function pruefe() {  
   var a=document.getElementsByName('detail')[0];  
   detail.document.getElementsByTagName('body')[0].style.overflow='hidden';  
   var b=detail.document.getElementById('cont');  
   if(a.style.height != eval(b.offsetHeight+35)+'px') {  
      a.style.height=eval(b.offsetHeight+35)+'px';  
   }  
}

müsste sonst auch schon reichen.

Noch mal zurück zu meinem Beispiel:

function dynfrm() {
iframe = document.getElementById('myIframe');
content_iframe = parent.myIframe.document.getElementById('div_elem');
iframe.style.height = content_iframe.offsetHeight + 'px';
}

  
Ich sehe auf den ersten Blick keinen Grund, warum dein Ansatz nicht auch im Firefox/Mozilla funktionieren sollte.  
Wann rufst du diese Funktion denn auf? Bei mir passiert der Größenabgleich über den onload-Eventhandler in jedem einzelnen eingebundenen Iframe-Dokument. Das ist bei dir vielleicht anders und evtl. die Ursache für das Problem.  
  
Gruß Gernot

[Mauz]

Hallo Gernot,

Noch mal zurück zu meinem Beispiel:

function dynfrm() {
iframe = document.getElementById('myIframe');
content_iframe = parent.myIframe.document.getElementById('div_elem');
iframe.style.height = content_iframe.offsetHeight + 'px';
}

>   
> Ich sehe auf den ersten Blick keinen Grund, warum dein Ansatz nicht auch im Firefox/Mozilla funktionieren sollte.  
> Wann rufst du diese Funktion denn auf? Bei mir passiert der Größenabgleich über den onload-Eventhandler in jedem einzelnen eingebundenen Iframe-Dokument. Das ist bei dir vielleicht anders und evtl. die Ursache für das Problem.  
  
Bei mir wird der onload-Eventhandler beim aufruf der IFrame geladen:  
~~~html
  
<iframe src="test.htm" id="myIframe" onLoad="dynfrm()" scrolling="no" style="width:700px;"></iframe>";  

wüsste jetzt nicht wie ich es anders machen könnte.

Gruß
Mauz

[Gernot Back]

Hallo Mauz,

Wann rufst du diese Funktion denn auf? Bei mir passiert der Größenabgleich über den onload-Eventhandler in jedem einzelnen eingebundenen Iframe-Dokument. Das ist bei dir vielleicht anders und evtl. die Ursache für das Problem.

Bei mir wird der onload-Eventhandler beim aufruf der IFrame geladen:

<iframe src="test.htm" id="myIframe" onLoad="dynfrm()" scrolling="no" style="width:700px;"></iframe>";

  
Bei mir wie gesagt im darin eingebunden Dokument über den Eventhandler onload im BODY-Anfangs-Tag. Das solltest du auch mal probieren, denn ich glaube, es ist ein Laufzeit-Problem:  
  
`<body onload="[code lang=javascript]if(self!=parent)parent.dynfrm()`{:.language-html}">[/code]  
  
Gruß Gernot

[Mauz]

Hi,

Bei mir wie gesagt im darin eingebunden Dokument über den Eventhandler onload im BODY-Anfangs-Tag. Das solltest du auch mal probieren, denn ich glaube, es ist ein Laufzeit-Problem:

<body onload="[code lang=javascript]if(self!=parent)parent.dynfrm()">[/code]

ne, immer noch selbiges Problem.

Gruß
Mauz

[Gernot Back]

Hallo Mauz,

<body onload="[code lang=javascript]if(self!=parent)parent.dynfrm()">[/code]

ne, immer noch selbiges Problem.

Habe es auch gerade mal an meinem Beispiel überprüft, dass es keinen Unterschied macht, ob man das onload-Event auf den Iframe oder das darin geladene Dokument bezieht. Deshalb werde ich das jetzt auch bei mir entsprechend geändert hochladen. Ist ja einfacher, wenn ich den Handler nur in ein Dokument stecke.

Gruß Gernot

[Mauz]

Hi,

Habe es auch gerade mal an meinem Beispiel überprüft, dass es keinen Unterschied macht, ob man das onload-Event auf den Iframe oder das darin geladene Dokument bezieht. Deshalb werde ich das jetzt auch bei mir entsprechend geändert hochladen. Ist ja einfacher, wenn ich den Handler nur in ein Dokument stecke.

das wohl war, nur leider hilft mir das jetzt auch nich weiter :(

Gruß
Mauz

[Mauz]

das wohl war, nur leider hilft mir das jetzt auch nich weiter :(

sry, hatte dein post am anfang des threads übersehen..

[Maxx]

Hallo,

function dynfrm() {
iframe = document.getElementById('myIframe');
content_iframe = parent.myIframe.document.getElementById('div_elem');
iframe.style.height = content_iframe.offsetHeight + 'px';
}

  
eine javascript Variable "iframe" zu nennen ist ungünstig. Je nach Browser kann ihn das aus dem Tritt bringen. Mehr konnte ich in meiner Glaskugel allerdings nicht erkennen.  
  

> die Variable content\_iframe wird mit paretn.myIframe... zugewiesen, und diese Zuweisung funktioniert nur im IE, denke ich.  
  
Vermutungen bringen uns nicht weiter. Gibt es im FF javascriptfehler? Diese Frage wurde dir bereits gestellt, du hast sie jedoch ignoriert.  
  
Grüße,  
  
Jochen  

-- 
Heute schon gescribbelt?  
[Scribbleboard](http://www.electric-lemon.de/scribbleboard.php)

[Mauz]

Hallo Jochen,

eine javascript Variable "iframe" zu nennen ist ungünstig. Je nach Browser kann ihn das aus dem Tritt bringen. Mehr konnte ich in meiner Glaskugel allerdings nicht erkennen.

Falls ich Informationen zu meinem Problem unterschlagen haben sollte, dann las es mich bitte wissen. Der Jok mit der Glaskugel ist alt und lang nicht mehr lustig...

Die Bennung der Variable hat mit meinem Problem nichts zu tun, aber danke für den Hinweis.

die Variable content_iframe wird mit paretn.myIframe... zugewiesen, und diese Zuweisung funktioniert nur im IE, denke ich.

Vermutungen bringen uns nicht weiter. Gibt es im FF javascriptfehler? Diese Frage wurde dir bereits gestellt, du hast sie jedoch ignoriert.

"Vermutungen bringen uns nicht weiter", sry dass mir wissen über Webdesign nicht mit in die Wiege gelegt worden ist! Wenn ich alles wissen würde, würde ich wohl kaum Fragen stellen! Wenn meine Vermutung nicht stimmen sollte, wieso belehrst du mich nicht eines besseren?

Fehlermeldung in der Javascript-Console:
frames.myIframe has no properties
div_elem has no properties

Gruß
Mauz

[Gernot Back]

Hallo Mauz,

poste doch bitte mal den HTML-Quellcode des Iframe-Elements im Mutterdokument. Ich möchte sehen ob du da mit Namens- oder ID-Attributen arbeitest, oder mit beidem und wenn ja ob die beide den Wert "myIframe" haben. Außerdem zweifele ich, dass du vom Mutterdokument in dem dein Quellcode eingebunden ist, tatsächlich noch dessen Parent ansprechen willst, eher doch wohl sich selbst, auch wenn das im Falle der Nicht-Existens eines solchen Großmutterdokuments identisch mit Self ist und somit nicht die Fehlerursache ist.

Gruß Gernot

[Mauz]

Hallo Gernot,

poste doch bitte mal den HTML-Quellcode des Iframe-Elements im Mutterdokument. Ich möchte sehen ob du da mit Namens- oder ID-Attributen arbeitest, oder mit beidem und wenn ja ob die beide den Wert "myIframe" haben. Außerdem zweifele ich, dass du vom Mutterdokument in dem dein Quellcode eingebunden ist, tatsächlich noch dessen Parent ansprechen willst, eher doch wohl sich selbst, auch wenn das im Falle der Nicht-Existens eines solchen Großmutterdokuments identisch mit Self ist und somit nicht die Fehlerursache ist.

  
<html>  
<head>  
</style>  
<script type="text/javascript" language="JavaScript">  
<!--  
function dynfrm() {  
 iframe = document.getElementById('myIframe');  
 content_iframe = parent.myIframe.document.getElementById('div_elem');  
 iframe.style.height = content_iframe.offsetHeight + 'px';  
}  
//-->  
</script>  
</head>  
<body>  
<iframe src="test.php" id="myIframe" onLoad="dynfrm()" scrolling="no" style="width:700px"></iframe>  
</body>  
</html>  

Gruß
Mauz

[Mauz]

test.php:

  
<html>  
<head>  
</head>  
<body>  
<div id="div_elem" style="border:1px solid blue">  
<?php  
  for($i=0;$i<50;$i++) echo $i." hallo<br>";  
?>  
</div>  
</body>  
</html>  

[Gernot Back]

Hallo Mauz,

poste doch bitte mal den HTML-Quellcode des Iframe-Elements im Mutterdokument. Ich möchte sehen ob du da mit Namens- oder ID-Attributen arbeitest, oder mit beidem und wenn ja ob die beide den Wert "myIframe" haben. Außerdem zweifele ich, dass du vom Mutterdokument in dem dein Quellcode eingebunden ist, tatsächlich noch dessen Parent ansprechen willst, eher doch wohl sich selbst, auch wenn das im Falle der Nicht-Existens eines solchen Großmutterdokuments identisch mit Self ist und somit nicht die Fehlerursache ist.

<html>
<head>
</style>
<script type="text/javascript" language="JavaScript">
[code lang=javascript]
function dynfrm() {
iframe = document.getElementById('myIframe');
content_iframe = parent.myIframe.document.getElementById('div_elem');

// Das ^^^^^^^ ist wohl überflüssig!

iframe.style.height = content_iframe.offsetHeight + 'px';
}

> </script>  
> </head>  
> <body>  
> <iframe src="test.php" id="myIframe" onLoad="dynfrm()" scrolling="no" style="width:700px"></iframe>  

Ergänze name="myIframe", sonst kannst du das Fenster nicht über seinen Namen ansprechen, wie du das oben hinter dem überflüssigen "parent." tust.  

> </body>  
> </html>[/code]  
  
Gruß Gernot

[Mauz]

Hi Gernot,

Ergänze name="myIframe", sonst kannst du das Fenster nicht über seinen Namen ansprechen, wie du das oben hinter dem überflüssigen "parent." tust.

hey super, es funktioniert endlich, vielen vielen dank... !!!

Liebe Grüße
Mauz