Window-in-Window: Floating frames
Hieronder zie je een zelfstandig window waarin zich een apart HTML-document bevindt. Met de schuifbalken kun je
er in rondkijken, zonder dat de rest van het scherm verandert. Deze site maakt er volop gebruik van.
De officiële naam van deze techniek is "Floating Frame", maar de naam "Inline
Frame" wordt meer gebruikt. Op deze website worden ze door elkaar gebruikt.
Elke browser kan er mee overweg. Toch kan het voorkomen dat er een tekst staat in de geest van:
"Deze site gebruikt IFRAME. Dat wordt door uw browser niet ondersteund!"
Als dat het geval is, staan de beveiligingsinstellingen van je browser te hoog.
De inhoud van dit frame staat in internet.htm. Dit is een lijst met links naar tools om je eigen site mee op te leuken, maar dat doet hier niet ter zake. Er kan van alles in staan.
- Een floating frame wordt gemaakt met de tag:
<iframe attributen>tekst</iframe>
- De inhoud van tekst wordt getoond in browsers die <iframe> niet ondersteunen of als de beveiliging van je browser te streng is. Dat laatste komt echter vrijwel nooit voor.
- De minimaal benodigde attributen zijn:
src Naam van het document (HTML-bestand) dat in het iframe wordt geladen.
Hier: internet.htm.name Naam van het frame, voor referentie doeleinden. Je kunt de inhoud van een iframe vervangen door een link te maken met target=naam.
Hier: lijstje.width Breedte van het iframe incl. schuifbalken, in beeldpunten (pixels) of percentage van de beschikbare breedte van het window.
Hier: 85% van de breedte.height Hoogte van het iframe incl. schuifbalken, in beeldpunten (pixels) of percentage van de beschikbare hoogte van het window.
Hier: 200 pixels. - De complete code voor het bovenstaande frame is:
<div style="text-align:center">
<iframe src="internet.htm" name="lijstje" width="85%" height="200">Deze site gebruikt IFRAME. Dat wordt door uw browser niet ondersteund!</iframe>
</div> - Het frame wordt horizontaal gecentreerd met behulp van
<div style="text-align:center"> .... </div>. - De hier genoemde attributen zijn voldoende om een <iframe> te maken met HTML5. In HTML 4.01 zijn er veel meer attributen beschikbaar, zie bijvoorbeeld www.handleidinghtml.nl.
- Het positioneren gebeurt met behulp van style en CSS, bij voorkeur binnen een <div>-tag.
- Neem ook kennis van het item Webdocument met responsive iframe.
- De HTML-code van het document in het frame (in dit geval internet.htm) bepaalt hoe de inhoud van het floating frame er uit ziet. Dit geldt ook voor de scrollbalken. Die horen nl. niet bij het floating frame, maar horen bij het document in het frame.
- Om het opzetten van een inline frame gemakkelijker te maken kun je een code-generator gebruiken. Veel software voor webdesign heeft er standaard een aan boord. Ook op deze website ontbreekt die niet. Je kunt er inline frames mee maken voor zowel HTML 4.01 als HTML5.
Klik op de knop hiernaast om hem te starten.
