Een Iframe opmaken met CSS

Een van de meest gebruikte HTML elementen van de afgelopen 10 jaar is misschien wel  het IFRAME element. Tegenwoordig zijn er misschien betere alternatieven zoals PHP Include, maar soms kom je situaties tegen waarbij het gebruik van een IFRAME nog steeds de beste oplossing is. Denk bijvoorbeeld aan de situatie waarbij je data wil wisselen zonder een pagerefresh. Voor de leken onder ons, een IFRAME is het best te beschrijven als een kozijn op een webpagina. In plaats van waar normaal gesproken het glas of het raam zit, toon je nu de inhoud van een externe pagina. Dit kan van alles zijn, een plaatje, een formulier gehost op een andere server, een YouTube filmpje, etc.

Een IFRAME is een kozijn op een webpagina. Binnen dit kozijn kun je de inhoud van een externe bron weergeven.

De opbouw

De opbouw van een IFRAME ziet er als volgt uit:  

<IFRAME> </IFRAME>

Tussen het begin en het eind van het element kan een alternatief voor het venster worden opgenomen. Denk bijvoorbeeld aan een hyperlink naar de webpagina die je in het frame wilt weergeven:

<iframe src="http://www.voorbeeld.nl"></iframe>

De opmaak

Je kozijn ;) kun je op verschillende manieren opmaken. Denk hierbij aan de bekende HTML attributen zoals ALIGN, HEIGHT en WIDTH. Je kunt een IFRAME echter ook een van de volgende attributen meegeven: CLASS, ID, STYLE, waardoor opmaak met CSS mogelijk wordt.

Bij de opmaak van een IFRAME met CSS kun je zowel het IFRAME zelf, het kozijn dus, en de inhoud van het frame opmaken. De opmaak van het IFRAME zelf doe je als volgt:

<iframe name='iframe' id="iframe" … </iframe>

De stijl van het IFRAME kun je op de gebruikelijke manier definiëren, bv. in een externe stylesheet:

iframe {
position: absolute;
top: 300px;
bottom: 0px;
}

De stijl van de pagina welke wordt getoond in het IFRAME moet worden gedefinieerd door opname ervan in de onderliggende pagina:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

De opmaak is wederom mogelijk met de gebruikelijke CSS. Indien de inhoud van het iframe niet door jezelf kan worden aangepast dan zou je kunnen proberen de inhoud te manipuleren met behulp van JavaScript. Dit gaat een stuk verder dan alleen CSS, maar als voorbeeld:

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

Tot zover de opmaak van een IFRAME met CSS.