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.

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *