Frames simuleren met <iframe>

Deze website is oorspronkelijk geschreven in HTML 4, waarbij de opmaak wordt geregeld met behulp van frames. Dat heeft onder andere het voordeel dat je zonder al te veel moeite de navigatie altijd zichtbaar kunt houden voor de bezoekers van je site. Dat scheelt een hoop scrollen.
Meer informatie over frames vind je in het item Frames gebruiken.

In de huidige standaard, HTML5, zijn frames niet meer gedefinieerd. Om de voordelen van frames toch te kunnen gebruiken, kun je frames simuleren ('namaken'). Daar zijn verschillende technieken voor, zie bijvoorbeeld het item Frames simuleren met CSS.

Op deze bladzijde onderzoek ik een manier voor om frames te simuleren met behulp van inline frames, ook bekend als floating frames, zie ook het item Window-in-Window: Floating frames.
Mijn conclusie is dat het erg lastig, zo niet onmogelijk is, om framesets en frames helemaal te vervangen door inline frames.

Het probleem zit in het positioneren van de inline frames. Daarvoor heb je CSS nodig. Als je de afmetingen van het browservenster verandert, verandert de hoogte van de inline-frames niet automatisch mee, iets wat "gewone" frames wel doen. Dat kun je opvangen met behulp van JavaScript, maar dat wordt erg ingewikkeld. Je moet nl. niet alleen de hoogte van de <div>'s aanpassen, maar ook de hoogte van de <iframe>'s. Daarbij ontspoort de top-coördinaat van alle frames. Dat moet je dus ook veranderen. Dergelijke rekenpartijen vertragen de werking van je pagina.

Je kunt echter toch vrij ver komen, met dien verstande dat de frames vaste afmetingen hebben. Hoe dat werkt vind je in het onderstaande verhaal.

De tag om een inline frame te maken is <iframe>. Deze bestaat ook in HTML5.

Bij deze techniek verdeel je het hoofddocument –net als bij een "ouderwetse" frame-set– in rechthoeken waarin zaken komen die elk een eigen functie hebben.

De frameset van deze website is als volgt opgebouwd:

De <frameset>-tags worden dus vervangen door <iframe>-tags. Die moet je op een slimme manier plaatsen. De volgorde waarin je de <iframe>-tags in je document plaatst, is nl. van cruciaal belang.

Klik op de link hieronder om het in de praktijk te zien werken.

Zoals je ziet lijkt het heel veel op het origineel, maar er zijn verschillen. Het meest opvallend is dat de frames niet doorlopen tot de onderkant van het window. Dit komt doordat de hoogte van de frames vast ligt (hoogte = 600px).

Je kunt vanuit de voorbeeld-pagina gewoon door deze website blijven navigeren. Alles blijft gewoon werken.

Er bestaan websites die op deze manier zijn opgemaakt. Ik raad het niet aan, ook omdat ik het niet mooi vind.

Als je op een moderne manier een frame-achtige lay-out wilt maken kun je het beste gebruik maken van de technieken die beschreven staan in het item Frames simuleren met CSS.

De code van het voorbeeld kun je downloaden om zelf te gebruiken. Dat vergt voor je eigen situatie wel wat creativiteit. Het voert te ver om de code in detail te beschrijven.

Opmerking:
 
In de huidige versie van deze website worden geen frames meer gebruikt. De Gele achtergrond, de navigatie en de titel "Ben's Hobbyhoekje" staan in één bestand, de broodtekst staat in een (responsive) iframe
 
Een enkel iframe kan wel responsive worden gemaakt. Zie het item Webdocument met responsive iframe.

Downloaden:
 
Druk op de knop:  File: voorb350.zip, 873 bytes.