Inline-frames, meestal alleen 'iframes' genoemd, zijn het enige type frame dat is toegestaan in HTML5. Deze frames zijn in wezen een deel van uw pagina dat u "uitknipt". In de ruimte die u uit de pagina hebt gesneden, kunt u vervolgens een externe webpagina invoeren. In essentie is een iframe een ander browservenster dat zich in uw webpagina bevindt. U seecode-iframes die vaak worden gebruikt op websites die externe inhoud zoals een Google-kaart of een video van YouTube moeten bevatten. Beide populaire websites gebruiken iframes in hun insluitcode.
Hoe het IFRAME-element te gebruiken
Het element gebruikt de algemene HTML5-elementen en verschillende andere elementen. Vier zijn ook kenmerken in HTML 4.01:
- -De URL voor de bron van het frame
- -De hoogte van het raam
- -De breedte van het venster
- - de naam van het venster
En drie zijn nieuw in HTML5:
srcdoc-De HTML voor de bron van het frame. Dit kenmerk heeft voorrang op elke URL in desrcattribuutzandbak-Een lijst met functies die moeten worden toegestaan of niet toegestaan in het framevensternaadloos- laat de user-agent weten dat het iframe moet worden gerenderd alsof het onzichtbaar deel uitmaakt van het bovenliggende document
Als u een eenvoudige iframe wilt maken, stelt u de bron-URL en de breedte en hoogte in:
Houd er rekening mee dat u ervoor mag kiezen om geen pixelwaarden te gebruiken voor de instellingen van uw iframe, maar in plaats daarvan kunt besluiten om een percentage te gebruiken. Als u een responsive website bouwt waarvan de dimensionering met verschillende schermformaten moet veranderen, zullen deze percentages belangrijk zijn.
Er zijn ook enkele kenmerken die geldig zijn in HTML 4.01 maar die verouderd zijn in HTML5. Omdat de meeste websites van vandaag HTML5 + gebruiken, zijn deze kenmerken die u niet wilt gebruiken (maar die u mogelijk in sommige oude documenten ziet).
- Gebruik in plaats daarvan een
EENelement om naar een beschrijving te linken - Gebruik in plaats daarvan de CSS
vlottereigendom allowtransparencyGebruik in plaats daarvan de CSSachtergrondeigenschap om de ifram transparant te maken- - in plaats daarvan gebruik maken van de
grensCSS-eigenschap marginheightGebruik in plaats daarvan de CSSmargeeigendommarginwidthGebruik in plaats daarvan de CSSmargeeigendom- Gebruik in plaats daarvan de CSS
overloopeigendom
IFRAME-browserondersteuning
De IFRAME element wordt ondersteund door alle moderne browsers:
- Android
- Chrome
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Safari
Als er geen versienummer wordt weergegeven in de bovenstaande lijst, komt dat omdat alle versies van die browser dit ondersteunen.
Eén ding om op te letten is dat terwijl alle browsers het ondersteunen IFRAME element, is er nog steeds beperkte ondersteuning voor enkele HTML5-functies.
- Gebruik makend van
overloopscrollen uitschakelen is niet betrouwbaar. Als u geen schuifbalken op uw iframes wilt, moet u doorgaan met het gebruik van descrollingattribuut. - De
srcdoc,zandbak, ennaadlooskenmerken worden op dit moment niet door browsers ondersteund.
Linken met Iframes
Wanneer u uw iframes geeft a naam of ID kaart je kunt dan je links naar dat frame richten met het attribuut op de EEN element. Wanneer een gebruiker vervolgens op de link klikt, wordt deze geopend in het iframe waarnaar wordt verwezen in plaats van in het huidige venster.
Probeer het zelf. Typ het volgende in een webpagina:
Dit is mijn iframe
Wanneer u op deze link klikt, wordt een nieuw document geopend in het bovenstaande venster.
id = "myIframe" src = "http://webdesign.about.com/#lp-main" height = "200px" width = "500px">
Als het document is geopend in de IFRAME heeft geen doelen ingesteld, dan zullen al die links in hetzelfde iframe openen als het bovenliggende document.
U kunt deze functie gebruiken om koppelingen in één te maken IFRAME verander de inhoud van een ander IFRAME op dezelfde pagina.
IFrames en beveiliging
De IFRAME element is op zichzelf geen beveiligingsrisico voor u of uw lezers. Helaas hebben iframes een slechte reputatie omdat ze door kwaadwillende websites kunnen worden gebruikt om inhoud op te nemen die de computer van een bezoeker kan infecteren zonder dat deze de pagina ziet. Dit gebeurt door links naar het onzichtbare te verwijzen IFRAME en die scripts zetten kwaadaardige code op. De gebruiker klikt op de link en denkt dat de link is verbroken omdat er niets leek te gebeuren, maar een script werd geopend waar ze het niet konden zien.
Er zijn ook computervirussen die een onzichtbare injecteren IFRAME in uw webpagina's, waardoor uw website effectief een botnet wordt. Ze kunnen dit doen door middel van SQL-injectie en andere aanvallen.
Het ding om te onthouden bij het opnemen van een IFRAME op uw webpagina is dat uw gebruikers alleen zo veilig zijn als de inhoud van alle sites waarnaar u linkt. Als u reden hebt om het gevoel te hebben dat een site onbetrouwbaar is, mag u er op geen enkele manier naar verwijzen en moet u de inhoud absoluut niet opnemen in een IFRAME. Het koppelen aan uw eigen pagina's binnen iframes vormt echter geen beveiligingsrisico voor u of uw gebruikers.
Origineel artikel door Jennifer Krynin. Bewerkt op 11/7/16 door Jeremy Girard
