Aha!
Vriend DaveOnCode zegt:
3. on the iframe’s page “onload” event, a function will be executed to adjust its height:
Bij jou staat de functie op de hoofdpagina index.html, en zou getriggerd moeten worden door een
onload op het iframe. Maar de hoofdpagina kan nog steeds niet weten hoe hoog het iframe is...
Het script zegt: "var iframe =
window.parent.document.getElementById(inhoud);".
Dan gaat het script op zoek naar de
parent-pagina van de index, en die is er niet. > Dan kan ie het niet doen.
Kijk nog maar eens goed naar de functie:
[JS]function resizeIframe(iframeID)
{
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
} [/JS]
Dus:
- De ingesloten pagina welkom.html moet de functie krijgen.
- De ingesloten pagina welkom.html moet ook de trigger krijgen: <body onload="resizeIframe('inhoud')">.
- Nu gaat de welkom-pagina via het script naar z'n parent: de index-pagina, en pakt daar het element met de id="inhoud" (het iframe dus).
- Dan stelt het script vast hoe hoog de container-div is met de id="content" = de hoogte van de content van de welkom-pagina.
- En tenslotte exporteert het script de gevonden hoogte naar de parent = dat wordt de iframe-hoogte op de index-pagina.
Het is een foefje dat je even moet weten: je kan niet vanuit de pagina met het iframe in de pagina in het iframe kijken, maar je kan wel vanuit de ingesloten pagina omhoog kijken naar de de pagina met het iframe (en die pagina opdrachten geven).
Voorwaarde is dat de pagina's op hetzelfde domein bivakkeren, anders zouden er rare dingen kunnen gebeuren.
Ik zou de functie eigenlijk schrijven als:
[JS]function resizeIframe(iframeID)
{
var contentHoogte=document.getElementById('content').offsetHeight; // bepaal hoogte van de content op de ingesloten pagina.
var iframe = window.parent.document.getElementById(iframeID); // ga naar parent-pagina en grijp het iframe-element daarin
iframe.style.height = contentHoogte + 'px'; // maak het iframe net zo hoog als de content van de ingesloten pagina.
} [/JS]
Komt op hetzelfde neer, maar leest iets makkelijker.
Als ik geen fout gemaakt heb, zou die het zo moeten doen.
- Terzijde: pff, wat een opdracht, om een site met frames te maken ...
Met vriendelijke groet,
CSShunter
_____
PS:
De aanroep van een id als argument van een functie (bij de onload) moet tussen aanhalingstekens: anders denkt het script dat het een variabele is.
De
iframeID in de functie zelf is een dummy voor wat je gaat invullen, en kan rustig blijven staan (daar zonder aanhalingstekens, want dat is wel een variabele die verderop in de functie wordt gebruikt. De value van die variabele wordt overgenomen van de ingevulde waarde.
Maar ... het hoeft helemaal geen algemene functie te zijn, want je weet van tevoren al hoe alles heet *).
Dan kan de functie ook luiden:
[JS]function resizeIframe()
{
var contentHoogte=document.getElementById('content').offsetHeight;
var iframe = window.parent.document.getElementById('inhoud');
iframe.style.height = contentHoogte + 'px';
} [/JS]
De aanroep wordt dan simpelweg: <body onload="resizeIframe()"> (de body van de welkom-pagina dus).
Alle andere pagina's die in het iframe moeten verschijnen: van hetzelfde laken een pak. Eveneens de functie, en ook de onload in de body.
____
*) Een algemene functie zou alleen nodig zijn als je verschillende iframes op dezelfde pagina hebt staan. Maar zo erg is het gelukkig niet.
, die je een klein stukje kunt schuiven (om de onderste twee regels te kunnen zien).
