[HTML/JS]Variabele Iframe hoogte, hoe doe ik dat?

[Ed.]

Ik heb het volgende probleem: Ik wil in een pagina m'n phpbb forum laden via een iframe. Dat lukt allemaal netjes, alleen het enige probleem is de hoogte van de Iframe. Er verschijnt steeds een lelijke tweede verticale scrollbar.

Wat ik dus probeer is dat de hoogte van het Iframe even hoog is als de inhoud van het Iframe (waardoor er dus geen verticale scrollbar ontstaat). Het probleem is dat van pagina tot pagina binnen het forum de hoogte verschilt.

Hoe krijg ik het dus voor elkaar dat er geen scrollbar ontstaat en tegelijkertijd de volledige inhoud van de Iframe zichtbaar is? En dat ook als iemand naar een subforum gaat de hoogte van het iframe zo aangepast wordt dat er geen scrollbar in het iframe ontstaat?

Ik heb al zelf de search gebruikt en ben de volgende topics tegen gekomen:
[rml][ html]lengte frame aanpassen aan inhoud[/rml]
[rml][ JS] IFRAME dynamisch groter of kleiner maken?[/rml]
[rml][ HTML] Iframe height aanpassen aan source document[/rml]
[rml][ JS] 'variabele iframe' (?)[/rml]

Aan de hand van deze topics ben ik nu ruim anderhalf uur aan het prutsen geweest met helemaal geen resultaat... Ik ben erg onbekend met javascript en ik weet dus bij god niet wat ik waar neer moet zetten en wat ik moet invullen bij <iframe height= en dat soort zaken

Als iemand me daar verder mee kan helpen zou ik uiterst dankbaar zijn!

[marty]

waarom wil je zo graag een iframe gebruiken?
zo te zien ben je ook wel eens met PHP bezig geweest; je kunt dan toch makkelijker iets includen? ben je van het hele scrollbalk probleem af

[Ed.]

nee, een include is erg omslachtig aangezien ik met nogal uitgebreidde scripts werk, en ik php nog volledig onder de knie moet krijgen om dat helemaal goed te doen. Een Iframe is daar in tegen veel makkelijker en het blijkt mogelijk te zijn (als je de bovenstaande topics leest) om met een simpel javascriptje dit met een iframe op te lossen

[crisp]

mijn ervaring is dat window.resizeTo in een document in een iframe in ieder geval onder IE het iframe kan vergroten; anders kan je mbv parent.document.getElementById('id_iframe').style.height ook wel wat knutselen.
Je hebt in elk geval in elke pagina die je in je iframe zet een scriptje nodig die na het laden de hoogte uitleest (document.innerHeight || document.body.scrollHeight) en naar een functie schopt. Een ander alternatief is een scriptje in de parent die continue de hoogte van het iframe checkt.

Al met al kan ik je wel vertellen dat al deze oplossingen voor een erg 'neurotisch' gedrag van je iframe kunnen gaan zorgen; ik ben zelf dan ook niet zo gecharmeerd van dit soort oplossingen en zou liever kiezen voor een scrollbalk.

[Ed.]

Ok, daar kan ik wel wat mee. In het phpbb forum zit een overall header die bij elke pagina terugkomt en waar ook de head en de body tag in zitten. Daar kan ik dus wel een script in kwijt. Alleen welk script? en hoe roep ik die functie weer aan in de height bij <iframe height=" " ?

[ Voor 5% gewijzigd door Ed. op 12-08-2003 21:23 ]

[crisp]

Rolex schreef op 12 August 2003 @ 21:22:
Ok, daar kan ik wel wat mee. In het phpbb forum zit een overall header die bij elke pagina terugkomt en waar ook de head en de body tag in zitten. Daar kan ik dus wel een script in kwijt. Alleen welk script? en hoe roep ik die functie weer aan in de height bij <iframe height=" " ?

welk script? gewoon een script dat je zelf kan schrijven; de code heb ik al voor 90% in mijn vorige reply staan

[SchizoDuckie]

Rolex schreef op 12 August 2003 @ 21:22:
Ok, daar kan ik wel wat mee. In het phpbb forum zit een overall header die bij elke pagina terugkomt en waar ook de head en de body tag in zitten. Daar kan ik dus wel een script in kwijt. Alleen welk script? en hoe roep ik die functie weer aan in de height bij <iframe height=" " ?

kijk even hoe ik het op www.zapguide.nl doe, de iframe wordt ingeladen, en bij body onload roept ie een parent.resizeIframe(document.body.contentHeight) aan (zoiets iig)

Helaas werkt dit af en toe nog niet goed. moet ik ooit nog eens naar kijken maar !tijd voor.

[Ed.]

crisp schreef op 12 August 2003 @ 21:27:

[...]

welk script? gewoon een script dat je zelf kan schrijven; de code heb ik al voor 90% in mijn vorige reply staan

Net zoals jij waarschijnlijk geen achterwaartse salto met een dubbele schroef kan doen vanaf een duikplank, kan ik niet programeren of javascripts schrijven. Ik ken html redelijk en php een héél klein beetje. Dus vraag ik hier vriendelijk om hulp, en jij helpt me uitstekend. Alleen geef me dan ook die andere 10 % zodat ik 't kan gebruiken. Ik kan geen volledig plaatje maken zonder 't laatste aansluitende puzzelstuk. Niet als flame bedoelt, maar je moet me echt uitleggen met javascript wat ik waar moet gebruiken. Nogal n00bish, maar ja, ik zal jou ook eerst droog een normale salto laten oefenen als je 't nog nooit eerder gedaan hebt

Papa eend: toffe site! die staat meteen gebookmarkt. Erg.. erg handig om te hebben in combinatie met m'n tvkaartje! Maar je voorbeeld van je Iframe. Het ziet er idd erg goed uit en gaat precies zoals ik 't bedoel. Ik zie dat je bij tvinfo.php dit gebruikt in je body tag:

code:

 onload="var height = (document.height > 0) ?  
document.height : document.body.scrollHeight; parent.changeHeight(height);"

Alleen als ik dit zelf invul bij mijn eigen iframe werkt 't niet ik zie nl. in je index.php ook geen extra javascripts staan, of mis ik hier is?

[ Voor 3% gewijzigd door Ed. op 12-08-2003 22:16 ]

[SchizoDuckie]

Rolex schreef op 12 August 2003 @ 22:15:
[...]
Alleen als ik dit zelf invul bij mijn eigen iframe werkt 't niet ik zie nl. in je index.php ook geen extra javascripts staan, of mis ik hier is?

uh jaaah want changeHeight == geen normale html functie

[Ed.]

*argh*

Het lukt me niet. Ik loop maar te kloten in die html files van je eend maar ik kom er niet uit Je maakt erg veel gebruik van div's en ik zie gewoon niet hoe ik 't voor elkaar krijg.

Ik heb nu in de html code van het iframe zelf dit staan:

onload="var height = (document.height > 0) ? document.height : document.body.scrollHeight; parent.changeHeight(height);"

en bij <iframe zelf gewoon een verwijzing naar de file zonder height element. Toch werkt 't niet, wat doe ik fout?

[crisp]

Dit in je <head> van het document in je iFrame, of includen als los js bestandje:

JavaScript:

<script type="text/javascript">

function changeHeight() {

  var height = window.innerHeight || document.body.clientHeight;  // kort door de bocht
  if (parent) parent.frames['myIframe'].style.height = height+'px';

}

window.onload = changeHeight;

</script>

en je iframe zoiets:

HTML:

<iframe id="myIframe" src="forum.php" style="height: 400px; height: 400px;"></iframe>

zou m.i. moeten werken (niet getest)

_{een achterwaartse salto lukt nog wel, die schroef is even oefenen denk}

[Verwijderd]

Je kunt het in het uiterste geval nog met een expression doen, maar die worden helaas bij elke JS event evaluated.

[Ed.]

YES!!!
Het is me gelukt. damn, na echt lang gekloot te hebben en veel gelezen gezocht en VEEL uitgeprobeert te hebben, werkt het dan eindelijk. Voor alle mensen die de search nog gebruiken en op dit topic stuiten, hier de ultime oplossing voor dit probleem:

de hoofdpagina:

code:

<html>

<head>
<title>Adjust An iFrame Height To Its Content</title>

</head>

<body>

    <!--
    Mozilla :
    overflow : can be set for the iframe 
    border : must be set for the iframe - Very buggy under IE, border may erase iframe content
    -->
    <iframe name="azerty" id="azerty" src="iframe.html" 
style="position:absolute;top:50px;left:50px;width:200px;height:200px;overflow:hidden;border:none;border-bottom:1px black solid" 
allowtransparency="true"></iframe>

</body>

</html>

het iframe:

code:

<html>

<head>
<title>Adjust An iFrame Height To Its Content</title>

<script type="text/javascript">
function resizeIframe() {

    // Must launched on the body onload event handler for IE
    // Use document.documentElement if you are in Compat mode
    i = parent.document.getElementById(window.name)
    iHeight = document.body.scrollHeight
    i.style.height = iHeight + 5 + "px"
}
</script>

</head>

<body onload="resizeIframe()" style="margin:0;border:none">
1:Zoog<br/>
2:Zoog<br/>
3:Zoog<br/>
4:Zoog<br/>
5:Zoog<br/>
6:Zoog<br/>
7:Zoog<br/>
8:Zoog<br/>
9:Zoog<br/>
10:Zoog<br/>
11:Zoog<br/>
12:Zoog<br/>
13:Zoog<br/>
14:Zoog<br/>
15:Zoog<br/>
</body>

</html>

[ Voor 15% gewijzigd door Ed. op 17-08-2003 15:17 ]

[Wuursj]

Sorry voor de kick maar ik zit een jaar later met hetzelfde probleem.
Saegos, bedankt voor het nog posten van de oplossing, in IE werkt ie perfect.

Maar in Mozilla niet, heb vanalles geprobeerd maar het iFrame krijgt daarin gewoon een statische hoogte die zich niet aanpast aan de hoogte van de pagina die erin geladen word.
Weet iemand hier een oplossing voor? Iets waarin Mozilla (en misschien nog andere niet uitgeprobeerde browsers) het script anders uitvoerd dan IE? Ik heb dus de methode van Saegos uit bovenstaande post gebruikt.

[crisp]

Als ik de oplossing van Saegos letterlijk overneem doet hij het prima hier in verschillende Mozilla en FireFox versies; ik denk dus dat je zelf een foutje maakt. Check je javascript console eens op eventuele errors.

[Ed.]

Leuk te zien dat iemand nog iets heeft aan de oplossing bijna een jaar later

Post anders eens de website waar je het op test, dat kijkt wat makkelijker naar het probleem.

[Wuursj]

Probleem opgelost

Ik denk inderdaad dat ik het stukje script niet letterlijk genoeg had overgenomen, ik dacht het geven van een 'name' en/of 'id' aan het iFrame niet echt nodig was. IE doet daar ook niet moeilijk over maar Mozilla kan dan dus blijkbaar dan geen waarde toekennen aan de hoogte, mozilla gaf als foutmelding dat de variabele i geen properties heeft. Toch wel handig om eens die javascript console te bekijken, thx voor de tip

Alleen na wat rommelen met die properties van het Iframe (veel verschillende dingen geprobeerd) kan dit keer IE niet meer overweg met een width="100%" en mozilla wel weer.
Verschillende browsers...

met

code:

<?php include("header.php"); ?>

<iframe  
          name="dagboek"    
          id="dagboek"
      src="sphpblog/index.php" 
      width="780" 
          frameborder="0"
          scrolling="no"
          noresize="true" 
      framespacing="0" 
          marginheight="0" 
      marginwidth="0"
      style="overflow:hidden;border:none;" 
      allowtransparency="true">
</iframe>   

<?php include("footer.php"); ?>

als pagina waarin het iframe staat gaat het dus (tot nu toe ) wel goed.

bedankt!

Het gaat trouwens over http://www.klippy.nl/philip/dagboek.php , let er maar niet te veel op, pas voor klein gedeelte af en webdingen is niet helemaal mijn ding.

edit:
kom nu niet met 'in die en die browser is ie nog niet goed'

[ Voor 23% gewijzigd door Wuursj op 09-08-2004 20:46 ]

[mike643]

Sorry dat ik deze topic weer naar boven gooi, maar de iframe werkt goed en wordt automatisch aangepast aan mijn scrollbar van de hele pagina. Alleen wanneer ik op een link link in de iframe dan gaat de scrollbar automatisch helemaal naar beneden terwijl ik het gewoon bovenaan wil hebben.
Nu heb ik allemaal javascript geprobeerd die de scrollbar bovenaan zetten maar dat heeft geen effect.

Iemand die dit ook heeft en heeft opgelost?

[marty]

linkje naar een online voorbeeld?