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.
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.
Je kunt met CSS ook de grootte, stijl en de kleur van de randen van een iframe bepalen.
 |
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>
