Wat is iFrame? | phoenixNAP IT-woordenlijst

Een iFrame, of Inline Frame, is een HTML-element waarmee u een ander HTML-document in de huidige webpagina kunt insluiten.

Wat is een iFrame?

Een iFrame, de afkorting van Inline Frame, is een HTML element dat het insluiten van een extern HTML-document binnen de grenzen van een ander HTML-document mogelijk maakt. In wezen fungeert het als een venster dat inhoud van een andere webpagina of bron kan weergeven, terwijl het onderdeel blijft van de huidige webpagina. iFrames worden veel gebruikt voor verschillende doeleinden, zoals het integreren van video's, interactieve kaarten, advertenties of andere dynamische inhoud in een website zonder dat gebruikers de pagina die ze bekijken hoeven te verlaten.

Hoe werkt een iFrame?

Een iFrame embed een extern HTML-document of andere webinhoud binnen de huidige webpagina. Hier is een stapsgewijze uitleg van hoe dit proces werkt:

Het iFrame-element invoegen. Het proces begint met het toevoegen van een tag aan de HTML van de webpagina. Deze tag bevat attributen zoals src, die de URL van de externe inhoud die moet worden ingesloten en andere optionele kenmerken zoals breedte, hoogte, framerand en allowfullscreen om het uiterlijk en gedrag van de iFrame te bepalen.
Het vragen naar de externe intentie. Zodra de gebruiker browser laadt de webpagina die het iFrame bevat, de browser leest het src-kenmerk in de tag en maakt een aparte HTTP verzoek naar de opgegeven URL om de inhoud op te halen.
De externe inhoud wordt geladen. De browser haalt de externe content op, wat een heel HTML-document, een mediabestand of een willekeurige webbron kan zijn. De content wordt behandeld als een onafhankelijk document binnen de hoofdwebpagina. De iFrame creëert in feite een minibrowservenster binnen de bovenliggende webpagina, en laadt en rendert de content alsof het een zelfstandige webpagina is.
De inhoud renderen. De browser geeft vervolgens de content weer binnen de grenzen van het iFrame. De ingebedde content verschijnt alsof het onderdeel is van de hoofdwebpagina, maar het werkt onafhankelijk. De bovenliggende pagina en de iFrame-content interacteren niet direct, hoewel ze dezelfde visuele ruimte delen.
Interactie en functionaliteit. Gebruikers interacteren met de content in de iFrame net zoals ze dat met elke webpagina zouden doen. Als de iFrame bijvoorbeeld een formulier bevat, kunnen gebruikers dit invullen en verzenden. De ingesloten content kan zijn eigen JavaScript, CSSen andere bronnen, uitgevoerd binnen de iFrame-context, gescheiden van de bovenliggende pagina.
Onafhankelijke levenscyclus van documenten. De ingesloten content binnen de iFrame heeft zijn eigen documentlevenscyclus. Dit betekent dat het laadt, uitvoert scripts, en communiceert met zijn eigen bronnen onafhankelijk van de bovenliggende pagina. Als de bovenliggende pagina bijvoorbeeld opnieuw wordt geladen, wordt de iFrame-inhoud ook opnieuw geladen, maar de status en het gedrag worden apart van het hoofddocument beheerd.
Beveiliging en beperkingen. Vanwege mogelijke beveiligingsrisico's implementeren browsers verschillende beperkingen op iFrame-inhoud. Cross-origin-beleid voorkomt bijvoorbeeld dat scripts op de bovenliggende pagina toegang krijgen tot inhoud binnen een iFrame vanaf een andere domeinBovendien gebruiken ontwikkelaars beveiligingsheaders en -attributen zoals zandbak om de mogelijkheden van de iFrame-inhoud verder te beperken, zoals het uitschakelen van scripts of het voorkomen van formulierverzendingen.

Kenmerken van een iFrame

De element in HTML heeft verschillende kenmerken die het gedrag, uiterlijk en de interactie met de weergegeven content bepalen. Hier volgt een gedetailleerde uitleg van de belangrijkste kenmerken:

bron Dit kenmerk specificeert de URL van de externe content die in het iFrame moet worden ingesloten. Het is het meest essentiële kenmerk omdat het bepaalt welke content in het iFrame wordt geladen. Bijvoorbeeld, zal de inhoud van "https://www.example.com" in het iFrame insluiten.
breedte en hoogte. Deze attributen bepalen de grootte van de iFrame in pixels of percentages. Bijvoorbeeld, maakt een iFrame van 600 pixels breed en 400 pixels hoog.
kaderrand. Dit kenmerk specificeert of de iFrame een rand moet hebben. De waarde 0 betekent geen rand, terwijl 1 een zichtbare rand betekent. Dit kenmerk wordt nu als verouderd beschouwd, waarbij moderne CSS de voorkeursmanier is om de iFrame-rand te stylen.
scrollen. Dit kenmerk regelt de zichtbaarheid van schuifbalken binnen de iFrame. Het kan drie waarden aannemen: yes, no of auto. yes dwingt schuifbalken om te verschijnen, no voorkomt ze en auto zorgt ervoor dat schuifbalken alleen verschijnen als dat nodig is. Bijvoorbeeld, voorkomt dat schuifbalken worden weergegeven, zelfs als de inhoud groter is dan het iFrame.
zandbak. Dit krachtige kenmerk maakt een set extra beperkingen mogelijk voor de inhoud binnen het iFrame om de beveiliging te verbeteren. Het kan worden gebruikt om scripts uit te schakelen, formulierinzending te voorkomen, het gebruik van plug-ins te blokkeren en andere potentieel riskante gedragingen te beperken. De waarde van dit kenmerk kan een door spaties gescheiden lijst met beperkingen zijn, zoals allow-scripts, allow-forms, allow-same-origin, etc. Bijvoorbeeld, zou toestaan dat scripts binnen het iFrame worden uitgevoerd, maar met andere beperkingen.
toestaan. Het kenmerk allow specificeert een featurebeleid voor de content in de iFrame. Dit beheert machtigingen voor zaken als cameratoegang, geolocatie, volledig scherm en meer. Het is een manier om bepaalde browserfuncties expliciet toe te kennen of te weigeren aan de content in de iFrame. Bijvoorbeeld, Hiermee krijgt de content alleen toegang tot de geolocatie van dezelfde oorsprong en wordt de toegang tot de camera volledig uitgeschakeld.
naam. Dit kenmerk wijst een naam toe aan de iFrame, wat handig kan zijn om deze te targeten met links of scripts. Bijvoorbeeld, een link met target="iframe_name" opent de gelinkte content binnen de genoemde iFrame. Dit is met name handig in situaties waarin meerdere iFrames op een pagina staan.
brondoc. Met dit kenmerk kunt u HTML-inhoud direct in het iFrame insluiten in plaats van deze te laden vanaf een externe bron. Het is handig voor het insluiten van kleine stukjes HTML-inhoud zonder dat er een apart bestand nodig is. Bijvoorbeeld, Hello, world!"> zou "Hallo wereld!" in het iFrame weergeven.
verwijzingsbeleid. Dit kenmerk regelt de hoeveelheid referrer-informatie die moet worden verzonden bij het ophalen van de src-URL. Het helpt bij het beheren van privacy- en beveiligingsproblemen met betrekking tot referrer-gegevens. De waarden kunnen no-referrer, origin, strict-origin, etc. zijn, die bepalen hoeveel van de URL van de originele pagina wordt gedeeld met de ingesloten content.
bezig met laden. Het attribuut loading specificeert of het iFrame direct of vertraagd geladen moet worden. De waarden kunnen eager zijn, wat het iFrame zo snel mogelijk laadt, of lazy, wat het laden uitstelt totdat het iFrame zich in de buurt van de viewport bevindt, wat de prestaties en gebruikerservaring verbetert door de initiële laadtijd te verkorten.
verwijzingsbeleid. Dit kenmerk stelt het referrerbeleid in voor verzoeken die door het iframe worden gedaan, wat van invloed is op de hoeveelheid informatie over de verwijzende pagina die naar de content van het iframe wordt verzonden. Opties zijn onder andere no-referrer, origin, same-origin en strict-origin.
csp. Met het kenmerk csp (content security policy) kan de ontwikkelaar een content security policy specificeren die specifiek is voor de content in de iFrame. Dit dwingt bepaalde beveiligingsmaatregelen af, zoals welke bronnen van content geladen mogen worden, wat bepaalde soorten aanvallen kan voorkomen, zoals cross-site scripting (XSS).

Waarvoor worden iFrames gebruikt?

iFrames worden gebruikt voor verschillende doeleinden in webontwikkeling, voornamelijk om externe content in een webpagina te embedden terwijl een aparte context voor die content behouden blijft. Hier zijn enkele veelvoorkomende use cases:

Video's insluiten. iFrames worden veel gebruikt om video's in te sluiten van platforms zoals YouTube, Vimeo of andere videohostingservices. Hierdoor kunnen gebruikers video's rechtstreeks op een website bekijken zonder de pagina te verlaten. De ingebedde videospeler, compleet met bedieningselementen, wordt in de iFrame geladen.
Kaarten integreren. iFrames worden vaak gebruikt om interactieve kaarten van services zoals Google Maps of OpenStreetMap in te sluiten. Dit biedt gebruikers de mogelijkheid om kaarten rechtstreeks op de webpagina te bekijken en ermee te interacteren, wat vooral handig is voor het weergeven van locaties, routebeschrijvingen en andere geografische gegevens.
Externe webpagina's of documenten weergeven. iFrames maken het mogelijk om hele webpagina's of documenten van andere websites op te nemen. Dit wordt vaak gebruikt om content weer te geven, zoals servicevoorwaarden, privacybeleid of andere externe documenten, zonder dat gebruikers de huidige site hoeven te verlaten.
Widgets en plug-ins van derden laden. Veel diensten van derden, zoals sociale mediaplatforms, chattools voor klantenondersteuning en advertentienetwerken, bieden widgets die kunnen worden ingebed met behulp van iFrames. Hierdoor kunnen websites functionaliteiten integreren zoals Facebook-reacties, X-feeds of livechatondersteuning zonder uitgebreide backend ontwikkeling.
Advertenties hosten. iFrames worden vaak gebruikt om advertenties op webpagina's te embedden. Advertentienetwerken bieden vaak iFrame-gebaseerde advertentietags, die helpen de advertentie-inhoud te isoleren van de rest van de pagina om conflicten tussen de code van de advertentie en de code van de pagina te voorkomen.
Inhoud isoleren om veiligheidsredenen. iFrames kunnen worden gebruikt om content van externe bronnen in te sluiten en deze tegelijkertijd te isoleren van de scripts en stijlen van de bovenliggende pagina. Dit is met name handig voor het handhaven van beveiligingsgrenzen, omdat het voorkomt dat potentieel onveilige content de hoofdpagina beïnvloedt.
Inhoud testen en vooraf bekijken. Ontwikkelaars gebruiken iFrames vaak om inhoud van een ontwikkelomgeving op een live site. Dit maakt het mogelijk om eenvoudig te vergelijken en te testen zonder de content volledig in de site te integreren.
Responsieve content weergeven. iFrames kunnen worden gebruikt om responsieve content weer te geven die zich aanpast aan verschillende schermformaten, zoals responsieve webpagina's of applicaties. Dit is handig om ervoor te zorgen dat ingebedde content toegankelijk en visueel consistent is op alle apparaten.
Formulieren en interactieve hulpmiddelen insluiten. iFrames worden gebruikt om formulieren, enquêtes, rekenmachines en andere interactieve tools van externe bronnen in te sluiten. Hierdoor kunnen websites complexe functionaliteit bieden zonder dat ze deze tools helemaal opnieuw hoeven te ontwikkelen.
Cross-domein insluiting. Wanneer content moet worden ingebed vanuit een ander domein, bieden iFrames een methode om dit te doen terwijl de scheiding van oorspronkelijke contexten behouden blijft. Dit is met name handig voor content die op een ander domein wordt gehost. server of domein, wat het beheer en de implementatie eenvoudiger maakt.

iFrame-voorbeelden

Hier zijn twee voorbeelden van gebruikte iFrames.

Voorbeeld 1: Een YouTube-video insluiten

Dit voorbeeld laat zien hoe u een YouTube-video in een webpagina kunt insluiten met behulp van een iFrame.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame YouTube Example</title>

</head>

<body>

    <h1>Watch this Video:</h1>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"

    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

    </iframe>

</body>

</html>

Uitleg:

Het src-attribuut is ingesteld op de URL van de YouTube-video. In dit geval is het een voorbeeldvideo.
De kenmerken width en height bepalen de grootte van de videospeler.
Het kenmerk 'toestaan' specificeert machtigingen voor functies zoals automatisch afspelen, versleutelde media en volledig scherm.
Met het kenmerk allowfullscreen kan de video in de modus volledig scherm worden bekeken.

Voorbeeld 2: Een Google Map insluiten

Dit voorbeeld laat zien hoe u een Google Map in een webpagina kunt insluiten met behulp van een iFrame.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame Google Map Example</title>

</head>

<body>

    <h1>Our Location:</h1>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345096274!

    2d144.95373631531565!3d-37.81720997975142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!

    1s0x6ad65d43f1a5d53b%3A0x1aaf3d5a5b64db5e!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1617174192722!5m2!

    1sen!2sau"

    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</body>

</html>

Uitleg:

Het src-attribuut bevat de URL die Google Maps heeft verstrekt voor het insluiten van de kaart. De URL bevat specifieke parameters die de locatie- en weergave-instellingen bepalen.
De kenmerken width en height bepalen de grootte van de kaart op de webpagina.
Met het gedeelte style="border:0;" worden alle randen rond de kaart verwijderd.
Met het kenmerk allowfullscreen kunnen gebruikers de kaart in de modus volledig scherm bekijken.
Met het kenmerk loading="lazy" wordt het laden van de kaart uitgesteld totdat deze zich in de buurt van de viewport bevindt, waardoor de laadprestaties van de pagina worden verbeterd.

Hoe gebruik ik iFrames?

In de volgende passages wordt uitgelegd hoe u iFrames kunt gebruiken om het maximale uit uw gebruikerservaring te halen.

Externe inhoud insluiten

Om externe inhoud in een webpagina in te sluiten, gebruiken ontwikkelaars doorgaans de HTML-element, waarmee ze bronnen zoals video's, kaarten of hele webpagina's van andere domeinen rechtstreeks in hun site kunnen opnemen. Het proces omvat het specificeren van de bron van de inhoud via het src-attribuut in de tag, die naar de URL van de externe content verwijst. Extra attributen zoals breedte, hoogte en toestaan kunnen worden gebruikt om het uiterlijk en gedrag van de ingesloten content te bepalen, zodat deze naadloos past binnen het ontwerp van de pagina.

Door externe inhoud op deze manier in te sluiten, verbeteren ontwikkelaars de functionaliteit en interactiviteit van hun webpagina's. Zo kunnen ze gebruikers een rijkere ervaring bieden zonder dat ze de site hoeven te verlaten.

Dynamisch inhoud laden

Het dynamisch laden van content binnen een iFrame omvat het wijzigen van de bron (src) van de iFrame als reactie op gebruikersinteracties of andere triggers, zoals knoppen of links. Dit kan worden bereikt met behulp van JavaScript, waar u het src-kenmerk van de iFrame kunt manipuleren om nieuwe inhoud te laden zonder dat de volledige pagina opnieuw hoeft te worden geladen.

Wanneer een gebruiker bijvoorbeeld op een knop klikt, kan een JavaScript-functie worden uitgevoerd die het src-attribuut van de iFrame bijwerkt, waardoor een nieuw HTML-document of webresource wordt opgehaald en weergegeven. Deze aanpak is met name handig voor het maken van dynamische web toepassingen waarbij verschillende soorten content op hetzelfde gebied van de pagina moeten worden weergegeven op basis van gebruikersacties. Dit verbetert de gebruikerservaring door naadloze overgangen tussen verschillende soorten content.

Bovendien kunt u door gebruik te maken van de history.pushState API In combinatie met dynamische iFrame-inhoud is het mogelijk om de browsergeschiedenis bij te houden, waardoor gebruikers door de dynamisch geladen inhoud kunnen navigeren alsof het traditionele pagina's zijn.

Inline-frames maken

Het maken van inline frames, beter bekend als iFrames, omvat het gebruik van HTML-element om externe content direct in een webpagina te embedden. Dit element is veelzijdig en stelt ontwikkelaars in staat om alles van video's en kaarten tot hele webpagina's of interactieve widgets in de bestaande content te voegen. Door het src-attribuut op te geven, definieert u de URL van de content die moet worden geëmbed, terwijl andere attributen zoals breedte, hoogte en frameborder het uiterlijk en gedrag van de iFrame bepalen.

iFrames zijn met name handig voor het naadloos integreren van content van derden, waardoor gebruikers met externe bronnen kunnen interacteren zonder de hoofdsite te verlaten. Met extra attributen zoals sandbox en allow kunnen ontwikkelaars de beveiliging en functionaliteit verfijnen, zodat de ingebedde content zich gedraagt zoals bedoeld, terwijl de algehele integriteit en prestaties van de website behouden blijven.

Aanbevolen werkwijzen voor iFrames

Bij het gebruik van iFrames in webontwikkeling is het volgen van best practices essentieel om ervoor te zorgen dat ze correct functioneren, de beveiliging behouden en een goede gebruikerservaring bieden. Hier zijn enkele best practices voor het gebruik van iFrames:

Gebruik het sandbox-kenmerk voor beveiliging. Het sandbox-kenmerk verbetert de beveiliging door beperkingen toe te passen op de content binnen de iFrame. Standaard kunnen iFrames beveiligingsrisico's introduceren, zoals cross-site scripting (XSS). Het gebruik van sandbox beperkt de acties die de ingesloten content kan uitvoeren, zoals het uitvoeren van scripts, het indienen van formulieren of het openen van browseropslag. U kunt ook selectief bepaalde functies toestaan, zoals scripts of formulieren, door extra allow-waarden op te geven.

<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

Geef een titelkenmerk op voor toegankelijkheid. Het toevoegen van een beschrijvend titelkenmerk aan uw iFrame verbetert de toegankelijkheid, met name voor gebruikers die afhankelijk zijn van schermlezers. Het titelkenmerk biedt een korte beschrijving van de content, zodat gebruikers begrijpen wat de ingebedde content is.

<iframe src="https://example.com" title="Interactive map of our location"></iframe>

Zorg voor een responsief ontwerp. iFrames kunnen soms de responsiviteit van een webpagina verstoren, vooral op kleinere schermen. Om ervoor te zorgen dat de iFrame-inhoud correct wordt geschaald op verschillende apparaten, gebruikt u CSS om de iFrame responsief te maken. U kunt dit bereiken door de breedte en hoogte in te stellen op percentages of door viewport-eenheden te gebruiken, gecombineerd met max-width- en max-height-beperkingen.

iframe {

    width: 100%;

    height: auto;

    max-width: 600px;

    max-height: 400px;

}

Vermijd overmatig gebruik van iFrames. Hoewel iFrames nuttig zijn, leidt overmatig gebruik tot langzamere laadtijden van pagina's, beveiligingsrisico's en een slechte gebruikerservaring. Overweeg waar mogelijk alternatieve methoden, zoals het gebruik van API's of het direct insluiten van content in de pagina in plaats van te vertrouwen op meerdere iFrames.
Stel een verwijzingsbeleid in. Het kenmerk referrerpolicy regelt de hoeveelheid referrerinformatie die wordt verzonden wanneer de iFrame-inhoud wordt geladen. Dit kan helpen de privacy van de gebruiker te beschermen en te voorkomen dat gevoelige informatie wordt gedeeld met de ingesloten inhoud. Veelvoorkomende waarden zijn no-referrer, origin of strict-origin-when-cross-origin.

<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

Gebruik het laadkenmerk om de prestaties te verbeteren. Het kenmerk loading helpt de paginaprestaties te optimaliseren door het laden van offscreen iFrames uit te stellen totdat ze nodig zijn (d.w.z. wanneer ze zich in de buurt van de viewport bevinden). De waarde lazy vertraagt het laden, terwijl eager de iFrame onmiddellijk laadt.

<iframe src="https://example.com" loading="lazy"></iframe>

Stel de juiste machtigingen in. Het allow-kenmerk specificeert welke functies de iFrame-inhoud mag gebruiken, zoals geolocatie, cameratoegang of automatisch afspelen. Het instellen van precieze machtigingen beperkt de mogelijkheden van de ingesloten inhoud, wat de beveiliging en privacy van de gebruiker verbetert.

<iframe src="https://example.com" allow="geolocation; microphone; camera"></iframe>

Overweeg cross-origin-beleid. iFrames die content laden van verschillende domeinen kunnen beveiligingsuitdagingen opleveren. Implementeer cross-origin resource sharing (CORS)-beleid op de server host de iFrame-inhoud en gebruik X-Frame-Options of de Content-Security-Policy (CSP) headers om te bepalen welke sites uw inhoud in een iFrame kunnen insluiten. Dit helpt clickjacking en andere beveiligingsexploits te voorkomen.
Zorg voor reservecontent. Als het iFrame niet kan worden geladen of wordt geblokkeerd, kunt u overwegen om een reserve-inhoud binnen de iFrame te plaatsen. tag. Deze content wordt weergegeven als de iFrame niet kan worden geladen, wat een betere gebruikerservaring biedt.

<iframe src="https://example.com">

    <p>Your browser does not support iFrames. Please visit <a href="https://example.com">this link</a> instead.</p>

</iframe>

Monitor de impact op de prestaties. iFrames kunnen de prestaties van de pagina vertragen, vooral als ze zware content bevatten zoals video's of interactieve elementen. Controleer regelmatig de impact van iFrames op de laadtijd van uw pagina en optimaliseer of lazy-load iFrames die niet direct zichtbaar zijn voor de gebruiker.