Wat is een Iframe in HTML en hoe gebruik je dit?
Met een iframe, wat ongemakkelijk vertaald in het nederlands een zwevend frame, kun je hele leuke dingen doen binnen je website. Zelfs zo dat het niet eens opvalt dat je een iframe gebruikt.
Meestal maakt men gebruik van een iframe als de informatie van een site aan de randen, om het frame heen, niet vaak hoeft te veranderen en datgene in het iframe wel gemakkelijk aangepast moet worden.
In tegenstelling tot wat de naam zegt is het beslist geen onderdeel van frames. Je hoeft dus body niet weg te laten. Je kunt het gewoon als element gebruiken in je body. Je kunt zelfs een hele website maken en maar een klein onderdeel als iframe gebruiken. Dit iframe is vervolgens wel een aparte pagina en daar moet je dus terdege rekening mee houden.
Je hebt dus content nodig waarvoor je een aparte pagina maakt.
De tag is <iframe> tot en met </iframe>. Hier hoef je overigens niet perse iets tussen te zetten.
Er is een aantal elementen die kunnen worden toegevoegd aan het iframe. We zetten er een aantal op een rijtje, met daarachter een uitleg.
- Frameborder
Met frameborder bepaal je de dikte van de lijn om het frame heen. - Height
Bepaalt de hoogte van het iframe. Kun je ook op auto zetten. - Name
Met dit element kun je je iframe een unieke naam geven, waarmee een link naar het iframe kan verwijzen. In je link zet je dan<a href="pagina.htm" target="frame1">Hierbij is frame.htm de webpagina en frame 1 de naam van het iframe. Op deze manier zorg je ervoor dat de link in het iframe verschijnt. - Scrolling
Dit attribuut kun je ook de waarde yes, no of auto geven. Daarmee bepaal je of (als de pagina te groot wordt) je scrollbalken (automatisch) krijgt of niet. - Src
Hiermee bepaal je de bron voor het iframe. De pagina die in je iframe verschijnt. - Width
Bepaalt de breedte van het frame. Kan in pixels of in procenten.
Een voorbeeld:
<iframe frameborder="1" height="200" name="frame1" scrolling="yes" src="https://meneersimmering.nl/" width="550"></iframe>Dit geeft het volgende resultaat:
Met onderstaande link zie je hoe je de koppeling maakt naar het iframe:
<a href="https://html-site.nl/" target="frame1">Hier link je mee naar het iframe</a>
Hier link je mee naar het iframe
Websites kunnen er tegenwoordig voor kiezen om het tonen in een iframe te laten blokkeren. Eerder had ik bijvoorbeeld een iframe gevuld met nu.nl en buienradar. Dat kan nu niet meer, dan komt er een foutmelding. Dit wordt gedaan met X-frame Options. Daarmee kun je via Apache regelen dat websites niet getoond worden op een andere server dan de eigen server.
