iFrames


HTML iFrames

Door het element iframe te gebruiken kan je een inline frame ook wel genoemd zwevend frame in een document opnemen. Het iframe element definieert een rechthoekig of een vierkant veld in het HTML-document waarin de browser een afzonderlijk document kan weergeven. Een iframe kan overal in een document geplaatst worden.

Hieronder zie je een voorbeeld van een iframe met een schuifbalk aan de rechterkant:


iFrame - opbouw

De opbouw van een iframe is als volgt:

<iframe src="url"></iframe>

Het attribuut src geeft de URL (webadres) van het document op, dat in een iframe moet worden opgenomen.


iFrame - hoogte en breedte

Je kunt de attributen height en width gebruiken om de hoogte en de breedte van een iframe op te geven. De attribuutwaarden worden standaard opgegeven in pixels, maar het kan ook in percentages, dat de hoogte of de breedte ten opzichte van de totale venster vastlegt.

VoorbeeldVoorbeeld:
<iframe src="iframe.html" width="200" height="200"></iframe>


iFrame - randen

Als je een iframe in een document hebt opgenomen dan wordt er standaard een zwarte rand om een iframe geplaatst. Indien gewenst kan je de rand verwijderen, door het attribuut style aan toe te voegen en gebruik te maken van de CSS eigenschap border.

VoorbeeldVoorbeeld:
<iframe src="iframe.html" style="border:none"></iframe>

Je kunt met CSS ook de grootte, stijl en de kleur van de randen van een iframe bepalen.

VoorbeeldVoorbeeld:
<iframe src="iframe.html" style="border:10px outset red"></iframe>

Tip De waarden "none" of "hidden" kan worden gebruikt als je geen rand om een iframe wilt hebben.


iFrame - als doelframe

Je kunt een iframe ook gebruiken als een doelframe bijvoorbeeld door er een link aan te koppelen. Je kunt door op een hyperlink buiten een iframe te klikken het document openen in een iframe, het enige wat je moet doen is de naam van het target attribuut van de link te verwijzen naar de naam van het name attribuut van de iframe.

De opbouw van een doelframe is als volgt:

<iframe src="url" name="iframe_naam"></iframe>

<a href="url" target="iframe_naam">link</a>
     Hiernaast een voorbeeld van een smiley in een iframe:

VoorbeeldVoorbeeld:
<!DOCTYPE html>
<html>
  <head>
   <style>
     .center { text-align: center; }
     .iframe { width: 120px; height: 120px; border: none; }
   </style>
  </head>
 <body> 
<table>
 <tr class="center">
  <th>SMILE</th>
  <tr>
  <td><iframe src="iframes/smiley.html" class="iframe" id="demo"></iframe></td>
  <tr class="center">
  <td><input type="button" onclick="yes();" value="ja"/> 
  <input type="button" onclick="no();" value="nee"/></td>
 </tr>
</table>     
<script>
  function yes(){
   document.getElementById('demo').src = 'iframes/smileyover.html';
  }
  function no(){
   document.getElementById('demo').src = 'iframes/smiley.html';
  }
</script>
 </body>
</html>