Webdocument met responsive iframe
Een floating frame, inline frames of i-frame kun je gebruiken om een webpagina te tonen binnen een webpagina. De charme is dat de opmaak en de inhoud van rest van de pagina niet wordt verstoord. Op deze website wordt daar veel gebruik van gemaakt, o.a. voor het tonen van lange lijsten. Je kunt ook een nadere website in een <iframe> zetten
De attributen height en width die je opgeeft in een iframe-tag, worden gewoonlijk opgegeven in pixels. Als je dat doet is het bijna niet mogelijk om de afmetingen van het iframe nog aan te passen aan de afmetingen van het document waar je in werkt. Ook met JavaScript is het lastig.
Dat geldt vooral als je i-frames wilt toepassen in een responsive site. Toch is het minder lastig dan het lijkt. De oplossing is CSS.
Hieronder zie je een i-frame. Er omheen is een marge van 20px.
De inhoud van het i-frame is een lijst met landen-extensies van top-level domeinen, maar dat doet voor dit verhaal niet ter
zake.
Als je de afmetingen van het browservenster verkleint, zodat het lichtpaarse deel smaller wordt, zie je dat het i-frame zelf ook smaller wordt.
het kunstje is om het i-frame in een <div>-tag te plaatsen. Daar stel je de marges in met een style-attribuut.
Op deze pagina wordt het i-frame ook horizontaal gecentreerd.
In de <iframe> tag laat je de attributen width en height weg. In plaats daarvan gebruik je een
style-attribuut waarin je de height instelt op de hoogte (in px, em, mm, etc., maar niet in %) die je wilt. De
width zet je op 100% (dus hier geen px, em, mm, etc. gebruiken!).
Neem ook kennis van het item Window-in-Window: Floating frames.
Gebruik:
- De code staat in de <BODY>, op de plaats waar je het frame wilt laten verschijnen.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <BODY>).
<div style="margin:20px; text-align:center">
<iframe src="html121a.htm" style="width:100%; height:200px">Uw
browser ondersteunt geen iframe.</iframe>
</div>
Opmerking:
Met deze methode wordt alleen het i-frame responsive. Als het document in het i-frame niet responsive is (zoals in het voorbeeld)
kan een deel van het document in het i-frame onzichtbaar worden, of moet er horizontaal worden gescrolled.
