iframe-tagi

Tag iframe mahdollistaa yhden sivuston sisällön upottamisen toiseen. Sitä käytetään sellaisen sisällön, kuten videon, kuvien tai artikkelien, näyttämiseen ilman, että tarvitsee avata uutta ikkunaa tai välilehteä.

Upotetun sivuston sisällöllä on juuri tuon sivuston design. Samalla CSS-tyylimme sekä JavaScript-koodimme eivät vaikuta iframe-tagin sisältöön.

iframe:n sisältöön voidaan soveltaa meidän JavaScriptiämme, mutta tätä varten on toimittava erityisillä menetelmillä.

Tagia iframe käytetään laajasti sivustoilla upottaaksesi videoita YouTubesta ja muilta alustoilta, sekä näyttääksesi artikkeleita ja kuvia muista lähteistä.

Attribuutit

Attribuutti	Kuvaus
`src`	Määrittää upotettavan sivun osoitteen.
`srcdoc`	Mahdollistaa iframen sisällön asettamisen suoraan attribuuttiin.
`frameborder`	Asettaa kehyksen iframen ympärille. Arvo `yes` asettaa kehyksen (oletusarvoisesti), ja arvo `no` poistaa kehyksen.
`scrolling`	Asettaa vierityspalkit iframen sisälle. Arvo `auto` - vieritys tarpeen mukaan (oletus), arvo `yes` - vieritys aina, arvo `no` - ei vieritystä.

Esimerkki

Laitetaanpa sivustollemme iframe toisella sivustolla (esimerkiksi otetaan ):

html<iframe src="/" width="600" height="400"></iframe>

Результат:

Esimerkki

Laitetaan sivustollemme video YouTubesta:

html<iframe
  src="https://www.youtube.com/embed/KzQrHpB1H8U"
  allowfullscreen
  width="400"
  height="400">
</iframe>

Результат:

Esimerkki

Kirjoitetaan sisältö suoraan iframeen:

html<iframe
  srcdoc="<h1>otsikko</h1><p>teksti</p>"
  width="300"
  height="200">
</iframe>

Результат: