Iframe

Otavan Opiston Av-wiki

IFRAME (Inline Floating Frames) on kehys joka sijoitetaan www-sivulle. Kehyksen hienous piilee siinä, että kehyksen sisään voidaan hakea sisältöä muualta esim jostakin toisesta sivustolta. Tässä esimerkki siitä kuinka haetaan ottelutulokset ja videot HC Crusadersin sivuilta.

<BODY>
<iframe src="http://www.hccrusaders.net/keski.php" name="iframe" 
width="200" marginwidth="10" height="200"  
marginheight="10" scrolling="auto">
</iframe>
</BODY>

Käytetyt attribuutit ovat

nimi (identifioi kehyksen ja sitä voidaan käyttää myös targettinä kun linkitetään)
width ja height (kehyksen koko joko pikseleinä tai prosentteina)
margin width ja margin height (sisällön ja kehyksen välinen tila)
scrolling (auto=vtarvttaessa yes=aina no=ei ikinä - (esim: scrolling="auto"))
frameborder (näkyykö kehyksen reunus vai ei esim näin (frameborder="0"))

Erityisen käteviä iframet ovat taulukkopohjaisissa taitoissa, koska silloin kehys saadaan juuri sinne minne halutaan.

<BODY>
<table width="450" border="0" cellpadding="10" 
cellspacing="0" bgcolor="#DCDCBA">
<tr valign="top">
<td>  <p >Ensimmäinen solu </p ></td>
<td>  <iframe src="http://www.hccrusaders.net/keski.php" name="iframe"
width="300" height="350" scrolling="auto">  </iframe> </td>
<td> <p >Kolmas solu </p> </td>
</tr>
</table>
</BODY>

Joskus voi olla ongelmana taustakuvan häviäminen. Silloin ratkaisu on tehdä iframesta läpinäkyvä tähän tapaan (allowtransparency).

<iframe src="kehys.htm" width="300" height="300" scrolling="auto" 
frameborder="0" allowtransparency="true"></iframe>

Linkittäminen iframen sisään onnistuu näin:

<a href="sivu.htm" target="iframe">Linkki</a>

Linkkiä napsauttamalla avautuu kehykseen linkin takana luuraava sivu eli sivu.htm.

Iframea voi tyylitellää css:n avulla esim näin:

<BODY>

<table width="450" border="0" cellpadding="10" 
cellspacing="0" bgcolor="#DCDCBA">
<tr valign="top">
<td>  <p >Ensimmäinen solu </p ></td>
<td>  <iframe src="http://www.hccrusaders.net/keski.php" name="iframe"
width="300" height="350" scrolling="auto" style="border: 5px double #ACBBEC;">  
</iframe> </td>
<td> <p >Kolmas solu </p> </td>
</tr>
</table>
</BODY>