Hva er en iframe?

En <iframe> (inline frame) er et HTML-element som bygger inn en annen nettside eller dokument inne i den gjeldende siden. Det skaper en separat nettleserkontekst innenfor et rektangulært område på siden, som gjør det mulig å vise innhold fra en annen URL — for eksempel et kart, video eller tredjepartswidget — uten at brukeren navigerer bort.

Iframes brukes ofte til å bygge inn YouTube-videoer, Google Maps, betalingsskjemaer, sosiale medier-widgets og annonsebanere. Fordi innebygd innhold kjører i sin egen kontekst, lar attributter som sandbox og allow utviklere stramme kontrollere hva den innebygde siden har tillatelse til å gjøre.

Verktøybeskrivelse

Dette verktøyet genererer klar-til-å-lime-inn <iframe> HTML-kode fra et enkelt skjema. Konfigurer kilde-URL-en, dimensjoner, rulleadferd, lastestrategi, tillatelser og sandbox-restriksjoner, og verktøyet gir umiddelbar utdata av den tilsvarende taggen. Ingen manuell attributtskriving eller memorering av sandbox-flaggsyntaks er nødvendig.

Eksempler

Minimal iframe:

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

Tregt lastet iframe med sandbox:

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

Iframe med kamera- og mikrofontillatelser:

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

Funksjoner

  • Genererer gyldig <iframe> kode fra et visuelt skjema — ingen HTML-kunnskaper nødvendig
  • Full kontroll over tillatelser (allow) og sandbox-restriksjoner
  • Direkteoppdateringer av forhåndsvisning når du endrer et alternativ

Alternativer forklart

Alternativ Beskrivelse
URL src-attributtet — adressen på siden som skal bygges inn
Bredde / Høyde Pikselstørrelser på iframen
Tittel Tilgjengelig etikett (title-attributt) for skjermlesere
Navn name-attributtet, brukt som lenkemal
Rulling Kontrollerer rullefelt: auto, alltid på eller alltid av
Lasting eager laster umiddelbart; lazy utsetter til nær visningsområdet
Tillat fullskjerm Legger til allowfullscreen slik at innebygd innhold kan gå fullskjerm
Kant Når den ikke er merket av, legger den til style="border: none;" for å fjerne standardkanten
Tillat funksjoner Gir spesifikke nettleser-API-tillatelser til den innebygde siden
Sandbox-flagg Begrenser hva den innebygde siden kan gjøre; hvert flagg aktiverer på nytt en spesifikk evne

Tips

  • Gi alltid et title-attributt for tilgjengelighet — skjermlesere kunngjør det når iframen får fokus.
  • Bruk loading="lazy" for iframes under folden for å forbedre sidens lastingsytelse.
  • Å legge til sandbox-attributtet uten flagg låser innholdet helt ned; legg bare til flaggene du faktisk trenger.