Mis on iframe?

<iframe> (inline frame) on HTML-element, mis manustab teise veebilehe või dokumendi praegusele lehele. See loob eraldi sirvimiskonteksti lehe ristkülikukujulises piirkonnas, võimaldades kuvada sisu erinevalt URL-ilt — näiteks kaarti, videot või kolmanda osapoole vidina — ilma et kasutaja peab lehelt ära minema.

Iframe'e kasutatakse tavaliselt YouTube'i videote, Google Mapsi, maksevormi, sotsiaalmeedia vidinade ja reklaamibanneri manustamiseks. Kuna manustatud sisu käivitatakse omas kontekstis, võimaldavad atribuudid nagu sandbox ja allow arendajatel rangelt kontrollida, mida manustatud lehel on lubatud teha.

Tööriista kirjeldus

See tööriist genereerib kopeerimiseks valmis <iframe> HTML-koodi lihtsast vormist. Seadistage lähte-URL, mõõtmed, kerimiskäitumine, laadimisstrategia, õigused ja liivakasti piirangud ning tööriist väljastab kohe vastava märgise. Käsitsi atribuutide kirjutamine või liivakasti lipuühenduse süntaksi meeldejätmine pole vajalik.

Näited

Minimaalne iframe:

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

Aeglaselt laaditud iframe liivakastiga:

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

Iframe kaamerate ja mikrofoni õigustega:

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

Funktsioonid

  • Genereerib kehtivat <iframe> koodi visuaalse vormi põhjal — HTML-teadmisi pole vaja
  • Täielik kontroll õiguste (allow) ja liivakasti piirangute üle
  • Reaalajas eelvaade värskendatakse, kui muudate mis tahes valikut

Valikute selgitus

Valik Kirjeldus
URL src atribuut — manustamisele kuuluva lehe aadress
Laius / Kõrgus Iframe'i pikselite mõõtmed
Pealkiri Juurdepääsetav silt (title atribuut) ekraanilugejatele
Nimi name atribuut, mida kasutatakse lingi sihtkohana
Kerimisriba Juhib kerimisriba: automaatne, alati sees või alati välja
Laadimine eager laadib kohe; lazy lükkab edasi, kuni see on vaatevälja lähedal
Luba täisekraan Lisab allowfullscreen, et manustatud sisu saaks täisekraanile minna
Ääris Kui märkimata, lisab style="border: none;" vaikimisi ääriste eemaldamiseks
Luba funktsioonid Annab manustatud lehele spetsiifilised brauseri API õigused
Liivakasti lipud Piirab seda, mida manustatud leht saab teha; iga lipp lubab uuesti konkreetse võime

Näpunäited

  • Andke alati title atribuut juurdepääsetavuse jaoks — ekraanilugejad teatavad sellest, kui iframe'ile fookus pannakse.
  • Kasutage loading="lazy" iframe'ide jaoks, mis asuvad voldi all, et parandada lehe laadimise jõudlust.
  • sandbox atribuudi lisamine ilma lipudeta lukustab sisu täielikult; lisage ainult lipud, mida tegelikult vajate.