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.

Voorbeeld van een iframe:

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.

Voorbeeld:

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

Uitproberen

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.

Voorbeeld:

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

Uitproberen

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

Voorbeeld:

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

Uitproberen

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>

Voorbeeld:

<!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>

Uitproberen

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.