Vad är en iframe?

En <iframe> (inline frame) är ett HTML-element som bäddar in en annan webbsida eller ett dokument inuti den aktuella sidan. Det skapar en separat webbläsarkontext inom ett rektangulärt område på sidan, vilket gör att innehål från en annan URL — såsom en karta, video eller tredjepartswidget — kan visas utan att användaren navigerar bort.

Iframes används ofta för att bädda in YouTube-videor, Google Maps, betalningsformulär, widgetar för sociala medier och reklambanners. Eftersom inbäddat innehål körs i sin egen kontext låter attribut som sandbox och allow utvecklare kontrollera noggrant vad den inbäddade sidan får göra.

Verktygsbeskrivning

Det här verktyget genererar färdig <iframe> HTML-kod som kan klistras in från ett enkelt formulär. Konfigurera käll-URL, dimensioner, scrollningsbeteende, laddningsstrategi, behörigheter och sandbox-begränsningar, och verktyget matar omedelbar ut motsvarande tagg. Ingen manuell attributskrivning eller memorering av sandbox-flaggsyntax krävs.

Exempel

Minimal iframe:

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

Lazy-loaded 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- och mikrofonbehörigheter:

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

Funktioner

  • Genererar giltig <iframe>-kod från ett visuellt formulär — ingen HTML-kunskap krävs
  • Fullständig kontroll över behörigheter (allow) och sandbox-begränsningar
  • Liveförhandsvisning uppdateras när du ändrar något alternativ

Alternativ förklarade

Alternativ Beskrivning
URL Attributet src — adressen till sidan som ska bäddas in
Bredd / Höjd Pixeldimensioner för iframe
Titel Tillgänglig etikett (title-attribut) för skärmläsare
Namn Attributet name, används som länkmål
Scrollning Kontrollerar rullningslisten: auto, alltid på eller alltid av
Laddning eager laddar omedelbar; lazy skjuter upp tills nära viewporten
Tillåt fullskärm Lägger till allowfullscreen så att inbäddat innehål kan gå i fullskärm
Kant När den är avmarkerad lägger den till style="border: none;" för att ta bort standardkanten
Tillåt funktioner Ger specifika webbläsarAPI-behörigheter till den inbäddade sidan
Sandbox-flaggor Begränsar vad den inbäddade sidan kan göra; varje flagga återaktiverar en specifik förmåga

Tips

  • Ange alltid ett title-attribut för tillgänglighet — skärmläsare presenterar det när iframe fokuseras.
  • Använd loading="lazy" för iframes under folden för att förbättra sidladdningsprestanda.
  • Om du lägger till attributet sandbox utan flaggor låses innehållet helt; lägg bara till de flaggor du faktiskt behöver.