Wat is een iframe?

Een <iframe> (inline frame) is een HTML-element dat een ander webpagina of document in de huidige pagina insluit. Het creëert een aparte browsercontext binnen een rechthoekig gebied van de pagina, waardoor inhoud van een ander URL — zoals een kaart, video of widget van derden — kan worden weergegeven zonder dat de gebruiker weg hoeft te navigeren.

Iframes worden vaak gebruikt om YouTube-video's, Google Maps, betalingsformulieren, widgets van sociale media en advertentiebannertjes in te sluiten. Omdat ingesloten inhoud in zijn eigen context wordt uitgevoerd, stellen attributen zoals sandbox en allow ontwikkelaars in staat om nauwkeurig te controleren wat de ingesloten pagina mag doen.

Hulpprogrammabeschrijving

Dit hulpprogramma genereert kant-en-klare <iframe> HTML-code uit een eenvoudig formulier. Configureer de bron-URL, afmetingen, scrollgedrag, laadstrategie, machtigingen en sandbox-beperkingen, en het hulpprogramma geeft onmiddellijk de overeenkomstige tag uit. Er is geen handmatig schrijven van attributen of memoriseren van de sandbox-vlaggen-syntaxis nodig.

Voorbeelden

Minimale iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Traag geladen iframe met sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe met camera- en microfoonmachtigingen:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Functies

  • Genereert geldige <iframe> code uit een visueel formulier — geen HTML-kennis vereist
  • Volledige controle over machtigingen (allow) en sandbox-beperkingen
  • Live preview-updates wanneer u een optie wijzigt

Opties uitgelegd

Optie Beschrijving
URL Het src-attribuut — het adres van de pagina die moet worden ingesloten
Breedte / Hoogte Pixelafmetingen van de iframe
Titel Toegankelijk label (title-attribuut) voor schermlezers
Naam Het name-attribuut, gebruikt als linkdoel
Scrollen Bepaalt de schuifbalk: automatisch, altijd aan of altijd uit
Laden eager laadt onmiddellijk; lazy stelt uit tot dicht bij de viewport
Volledig scherm toestaan Voegt allowfullscreen toe zodat de ingesloten inhoud volledig scherm kan gebruiken
Rand Wanneer uitgeschakeld, voegt style="border: none;" toe om de standaardrand te verwijderen
Functies toestaan Verleent specifieke browserAPI-machtigingen aan de ingesloten pagina
Sandbox-vlaggen Beperkt wat de ingesloten pagina kan doen; elke vlag schakelt een specifieke mogelijkheid weer in

Tips

  • Geef altijd een title-attribuut op voor toegankelijkheid — schermlezers kondigen dit aan wanneer de iframe focus krijgt.
  • Gebruik loading="lazy" voor iframes onder de vouw om de laadprestaties van de pagina te verbeteren.
  • Het toevoegen van het sandbox-attribuut zonder vlaggen vergrendelt de inhoud volledig; voeg alleen de vlaggen toe die u werkelijk nodig hebt.