Inleiding tot Iframes in HTML

Iframes in HTML zijn niets anders dan inline frames die worden gebruikt als een HTML-document om er nog een HTML-document aan toe te voegen. Het wordt meestal gebruikt in webpagina's of webontwikkelingsprocessen om andere inhoud via een andere bron op te nemen, zoals advertenties op die webpagina.

De meeste webontwerpers gebruiken Iframe om interactieve applicaties op de website of op webpagina's te presenteren. Het wordt mogelijk gemaakt door javaScript te gebruiken of door het doelkenmerk in HTML te gebruiken.

Het belangrijkste doel van Iframe is om een ​​webpagina binnen een andere webpagina weer te geven. Het inline frame moet worden weergegeven met behulp van een tag genaamd

  • Het is ook mogelijk om als volgt een specifieke hoogte en breedte te geven aan ons iframe in pixels:
  • In de bovenstaande syntaxis zullen alle dingen hetzelfde zijn, bovendien kunnen we hoogte en breedte opgeven in pixelsindeling die definieert als

Voorbeeld:

  • Nog een methode voor het definiëren van hoogte en breedte van het iframe met behulp van waarden via CSS wordt in de onderstaande syntaxis getoond:
  • Alle dingen zijn hetzelfde als hierboven, alleen verandering aanbrengen in het specificeren van waarden.

Voorbeeld:

  • Nog een functie die aan iframe wordt toegevoegd, is dat we reeds gedefinieerde randen aan het frame kunnen verwijderen door de eigenschap border none te gebruiken. De syntaxis hiervoor is als volgt:
  • Met behulp van CSS is het ook mogelijk om veel dingen met de rand te doen, zoals de grootte van de rand wijzigen, wat kleur op de rand aanbrengen, enz.

Iframe kan worden gebruikt als doel voor een link met behulp van de syntaxis:

  • In de bovenstaande syntaxis is src onze normale URL, hier het doelkenmerk van de link die naar het naamkenmerk in onze iframe-tag gaat verwijzen.

Voorbeeld:

Iframes Tag Attribuut

Er zijn verschillende kenmerktags die in de Iframes worden gebruikt, deze zijn:

  • Src: dit kenmerk wordt gebruikt om een ​​bestand in te voegen dat in het frame moet worden opgenomen. URL geeft de doelwebpagina aan die binnen een iframe moet worden geladen.
  • Naam: Naam is een kenmerk dat wordt gebruikt om een ​​identificatienaam aan het frame te geven. Het is het handigst wanneer u een koppeling maakt om een ​​andere webpagina te openen.
  • allowfullscreen: met dit kenmerk kunt u uw frame in de volledige breedte weergeven. dus moeten we de waarde true instellen om deze functie te kunnen uitvoeren
  • Frameborder: dit is een handig attribuut waarmee u wel of geen rand aan het frame kunt tonen. Waarde 1 is om rand & 0 te tonen om geen rand aan het frame te tonen.
  • Margebreedte: hiermee kunt u ruimte tussen de linker- en rechterkant van het frame definiëren
  • Margehoogte: hiermee kunt u ruimte tussen de boven- en onderkant van het frame definiëren.
  • Scrollen: deze attributen gebruiken om te bepalen of de schuifbalk aan het frame wordt getoond of niet. opgenomen waarden zijn 'ja' of 'nee' of 'auto'.
  • Hoogte: dit werd gebruikt om de hoogte van het frame te definiëren. Weer in% of pixels
  • Breedte: werd gebruikt om de breedte van het frame te definiëren. Weer in% of pixels
  • Longdesc: Met behulp van dit kenmerk kunt u een andere pagina koppelen die een lange beschrijving van de inhoud van uw frame bevat.

Voorbeelden van iframes in HTML

Hier zijn enkele voorbeelden van Iframes in HTML die hieronder worden uitgelegd:

Voorbeeld 1

Laten we een voorbeeld bekijken waarin we laten zien hoe u een iframe met een specifieke hoogte en breedte kunt maken.

Code:

HTML Iframes-demo


Hier laten we een voorbeeld zien van het iframe dat specifieke hoogte en breedte in pixels-indeling bevat

Output:

Voorbeeld 2

Laten we een ander voorbeeld bekijken waarin we laten zien hoe u een iframe met een specifieke hoogte en breedte kunt maken. Maar in dit voorbeeld specificeren we hoogte en breedte via CSS. Hier zien we dat de schuifbalk wordt aangepast volgens de inhoudsgrootte.

Code:

HTML Iframes-demo


Hier laten we een voorbeeld zien van het iframe dat specifieke hoogte en breedte in pixels-indeling bevat

Output:

Voorbeeld 3

Hier overwegen we een voorbeeld waarin we een rand aan iframe gaan toevoegen door enkele extra CSS-eigenschappen toe te voegen om een ​​verandering in de grootte van de rand, een verandering in kleur van de rand, enz. Weer te geven. Dus we kunnen zoveel toevoegen als stijl naar ons iframe.

Code:

HTML Iframes-demo


Hier laten we een voorbeeld zien van Iframe dat een rand bevat met enkele extra CSS-eigenschappen

Output:

Voorbeeld 4

Laten we een ander voorbeeld bekijken waarin we laten zien hoe het doelkenmerk is om een ​​link van een webpagina te openen met een iframe.

Code:

Iframe Demo- Target voor een link


EDUCBA

Wanneer het doel van een link overeenkomt met de naam van een iframe, wordt de link geopend in het iframe.

Output:

Doeluitgang:

Zoals hierboven getoond, kunnen we op de doellink EDUCBA klikken, zodat de volgende webpagina wordt geopend.

Conclusie

Uit alle bovenstaande informatie concludeerde het dat iframe een inline frame is dat een ander HTML-document in zichzelf bevat. Het werd beschouwd als het krachtigste HTML-element voor webontwerpdoeleinden. Met behulp hiervan kunt u ook inhoud van een andere bron toevoegen. Het maakt gebruik van verschillende soorten HTML-attributen zoals Global Attributes, Event Attributes, enkele gerelateerde pagina's, etc.

Aanbevolen artikelen

Dit is een handleiding voor de Iframes in HTML. Hier bespreken we de syntaxis, tagattribuut van iframes in HTML samen met de verschillende voorbeelden en code-implementatie. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. Selenium-opdrachten
  2. HTML-frames
  3. HTML-tekstkoppeling
  4. Maak tabellen in HTML

Categorie:

Web ontwikkelingstools