Mikä on iframe?

<iframe> (inline frame) on HTML-elementti, joka upottaa toisen verkkosivun tai asiakirjan nykyiselle sivulle. Se luo erillisen selainkontekstin sivun suorakaiteen muotoiselle alueelle, jolloin eri URL-osoitteesta peräisin oleva sisältö — kuten kartta, video tai kolmannen osapuolen widget — voidaan näyttää ilman, että käyttäjä navigoi pois sivulta.

Iframeja käytetään yleisesti YouTube-videoiden, Google Mapsin, maksulomakkeiden, sosiaalisen median widgetien ja mainosbannerin upottamiseen. Koska upotettu sisältö suoritetaan omassa kontekstissaan, attribuutit kuten sandbox ja allow antavat kehittäjille mahdollisuuden hallita tiukasti, mitä upotettu sivu saa tehdä.

Työkalun kuvaus

Tämä työkalu luo valmiiksi liitettävää <iframe> HTML-koodia yksinkertaisesta lomakkeesta. Määritä lähde-URL, mitat, vierityksen käyttäytyminen, latausstrategia, käyttöoikeudet ja sandbox-rajoitukset, ja työkalu tuottaa välittömästi vastaavan tunnisteen. Manuaalista attribuuttien kirjoittamista tai sandbox-lipun syntaksin muistamista ei tarvita.

Esimerkit

Minimaalinen iframe:

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

Lazyload-iframe sandbox-rajoituksella:

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

Iframe kamera- ja mikrofoniluilla:

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

Ominaisuudet

  • Luo kelvollista <iframe> koodia visuaalisesta lomakkeesta — HTML-tietoa ei vaadita
  • Täysi hallinta käyttöoikeuksiin (allow) ja sandbox-rajoituksiin
  • Live-esikatselu päivittyy jokaisen vaihtoehdon muuttuessa

Vaihtoehdot selitettynä

Vaihtoehto Kuvaus
URL src-attribuutti — upotettavan sivun osoite
Leveys / Korkeus Iframen pikselidimensiot
Otsikko Saavutettava merkintä (title-attribuutti) näytönlukijoille
Nimi name-attribuutti, jota käytetään linkin kohteena
Vieritys Hallitsee vierityspalkkia: auto, aina päällä tai aina pois
Lataus eager lataa välittömästi; lazy lykkää, kunnes lähellä näkymää
Salli kokoruutu Lisää allowfullscreen niin, että upotettu sisältö voi mennä kokoruutuun
Reuna Kun valitsematon, lisää style="border: none;" oletusreunan poistamiseksi
Salli ominaisuudet Myöntää erityisiä selaimen API-käyttöoikeuksia upotetulla sivulla
Sandbox-liput Rajoittaa, mitä upotettu sivu voi tehdä; jokainen lippu ottaa käyttöön tietyn kyvyn

Vinkkejä

  • Anna aina title-attribuutti saavutettavuuden vuoksi — näytönlukijat ilmoittavat sen, kun iframe saa fokuksen.
  • Käytä loading="lazy" iframeille sivun alapuolella sivun lataussuorituskyvyn parantamiseksi.
  • sandbox-attribuutin lisääminen ilman lippuja lukitsee sisällön täysin; lisää vain liput, joita todella tarvitset.