Introduktion till Iframes i HTML

Iframes i HTML är inget annat än inline frames som används som ett HTML-dokument för att lägga till ett annat HTML-dokument i det. Det används mest i webbsidor eller webbutvecklingsprocesser för att inkludera något annat innehåll genom en annan källa som annonser på den webbsidan.

De flesta webbdesigners använder Iframe för att presentera interaktiva applikationer på webbplatsen eller på webbsidor. Det är möjligt med hjälp av javaScript eller med hjälp av målattributet i HTML.

Huvudsyftet med Iframe är att visa en webbsida på en annan webbsida. Den inline ramen ska visas med hjälp av en tagg som heter

  • Det är också möjligt att ge någon specifik höjd och bredd till vårt Iframe i pixelformat enligt följande:
  • I ovanstående syntax kommer alla saker att bli samma, dessutom kan vi ange höjd och bredd i pixelformat som definierar som

Exempel:

  • En ytterligare metod för att definiera höjd och bredd till iframe genom att använda värden via CSS visas i syntaxen nedan:
  • Alla saker är desamma som ovan och gör bara förändringar i att ange värden.

Exempel:

  • En ytterligare funktion läggs till iframe är att vi kan ta bort redan definierade gränser till ramen genom att använda egenskapen gräns ingen. Syntaxen för detta är som följer:
  • Med hjälp av CSS är det också möjligt att göra många saker med gränsen som att ändra storlek på gränsen, applicera lite färg på gränsen, etc.

Iframe kan användas som mål för en länk med syntaxen:

  • I ovanstående syntax är src vår normala URL, här målattributet för länken kommer att hänvisa namnattribut i vår iframe-tagg.

Exempel:

Iframes Tagattribut

Det finns olika attributtaggar som används i Iframes som är följande:

  • Src: Detta attribut används för att infoga fil som måste inkluderas i ramen. URL anger den målsida som ska laddas inom en iframe.
  • Namn: Namn är ett attribut som används för att ge ett visningsnamn till ramen. Det är mest användbart där du skapar en länk för att öppna en annan webbsida.
  • allowfullscreen: Detta attribut låter dig visa din ram i formatet i full bredd. så vi måste ställa in värde för att hända den här funktionen
  • Frameborder: Detta är ett användbart attribut som låter dig visa gränsen eller inte visa gränsen till ramen. Värde 1 är att visa gränsen & 0 för att inte visa gränsen till ramen.
  • Marginalbredd: Gör att du kan definiera utrymme mellan ramens vänstra och högra sida
  • Marginheight: Gör att du kan definiera utrymme mellan ramens övre och undre del.
  • Rullning: Dessa attribut används för att kontrollera om rullningsfältet ska visas eller inte till ramen. inkluderade värden är 'ja' eller 'nej' eller 'auto'.
  • Höjd: Det användes för att definiera höjden till ramen. Vädret i% eller i pixlar
  • Bredd: Den användes för att definiera bredden till ramen. Vädret i% eller i pixlar
  • Longdesc: Med hjälp av detta attribut kan du länka till en annan sida som har en lång beskrivning av innehållet i din ram.

Exempel på Iframes i HTML

Här är några exempel på Iframes i HTML som förklaras nedan:

Exempel 1

Låt oss överväga ett exempel där vi ska visa hur man skapar en iframe med en specifik höjd och bredd.

Koda:

HTML Iframes-demo


Här visar vi exempel på Iframe som innehåller specifc Höjd och bredd i pixelformat

Produktion:

Exempel 2

Låt oss överväga ett annat exempel där vi ska visa hur man skapar en iframe med en specifik höjd och bredd. Men i det här exemplet specificerar vi höjd och bredd genom CSS. Här kan vi se att rullningsfältet justeras enligt innehållsstorlek.

Koda:

HTML Iframes-demo


Här visar vi exempel på Iframe som innehåller specifc Höjd och bredd i pixelformat

Produktion:

Exempel 3

Här överväger vi ett exempel där vi kommer att lägga till en gräns till iframe genom att lägga till några extra CSS-egenskaper för att visa en förändring i gränsen, ändra färg på gränsen, etc. Så vi kan lägga till så mycket som stil till vår iframe.

Koda:

HTML Iframes-demo


Här visar vi exempel på Iframe som innehåller gränsen till några ytterligare CSS-fastigheter

Produktion:

Exempel 4

Låt oss överväga ett annat exempel som vi ska visa hur målattributet för att öppna en länk till en webbsida med en iframe.

Koda:

Iframe-demo - mål för en länk


EDUCBA

När målet för en länk matchar namnet på en iframe öppnas länken i iframe.

Produktion:

Målutgång:

Som visas ovan Exempel kan vi klicka på mållänken EDUCBA så att den öppnar nästa webbsida som visas nedan.

Slutsats

Av all ovanstående information drog den slutsatsen att iframe är en inline-ram som innehåller ett annat HTML-dokument i sig själv. Det betraktas som det mest kraftfulla HTML-elementet för webbdesignande syften. Med hjälp av det kan du också lägga till lite innehåll från en annan källa. Den använder olika typer av HTML-attribut som Global Attribut, Event Attribut, vissa relaterade sidor etc.

Rekommenderade artiklar

Detta är en guide till Iframes i HTML. Här diskuterar vi syntax, tagattribut för iframes i HTML tillsammans med olika exempel och kodimplementering. Du kan också titta på följande artiklar för att lära dig mer -

  1. Selenium-kommandon
  2. HTML-ramar
  3. HTML-textlänk
  4. Skapa tabeller i HTML

Kategori:

Verktyg för webbutveckling