Úvod do iframe v HTML

Prvky iframe v HTML nejsou nic jiného než vložené rámečky, které se používají jako dokument HTML k přidání dalšího dokumentu HTML. Většinou se používá na webových stránkách nebo v procesech vývoje webových stránek k zahrnutí jiného obsahu prostřednictvím jiného zdroje, jako jsou reklamy na této webové stránce.

Většina webových designérů používá Iframe k prezentaci interaktivních aplikací na webových stránkách nebo na webových stránkách. Je to možné pomocí javaScript nebo pomocí cílového atributu v HTML.

Hlavním účelem Iframe je zobrazit webovou stránku na jiné webové stránce. Vložený rámeček by měl být zobrazen pomocí značky s názvem

  • Náš Iframe je také možné určit určitou výšku a šířku ve formátu pixelů takto:
  • Ve výše uvedené syntaxi budou všechny věci stejné, navíc můžeme určit výšku a šířku ve formátu pixelů definujících jako

Příklad:

  • V níže uvedené syntaxi je uvedena další metoda pro definování výšky a šířky prvku iframe pomocí hodnot prostřednictvím CSS:
  • Všechny věci jsou stejné jako výše, pouze se mění specifikace.

Příklad:

  • Do prvku iframe bude přidána ještě jedna funkce: můžeme odstranit již definované ohraničení do rámce pomocí vlastnosti border none. Syntaxe je následující:
  • S pomocí CSS je také možné dělat s hranicí mnoho věcí, jako je změna velikosti hranice, použití nějaké barvy na hranici, atd.

Iframe lze použít jako cíl odkazu pomocí syntaxe:

  • Do výše uvedené syntaxe je src naše normální URL, zde je cílovým atributem odkazu, který bude odkazovat na atribut jména v naší značce iframe.

Příklad:

Atribut značky iframes

Do prvků iframe jsou použity různé značky atributů:

  • Src: Tento atribut se používá k vložení souboru, který musí být zahrnut do rámce. Adresa URL určuje cílovou webovou stránku, která se má načíst do prvku iframe.
  • Název: Název je atribut, který se používá k přiřazení nějakého identifikačního názvu k rámci. Nejužitečnější je, když vytváříte jeden odkaz pro otevření další webové stránky.
  • allowfullscreen: Tento atribut umožňuje zobrazit rámeček do formátu plné šířky. takže musíme tuto hodnotu nastavit na true
  • Frameborder: Toto je užitečný atribut, který vám umožní ukázat ohraničení nebo nezobrazit ohraničení rámečku. Hodnota 1 je ukázat ohraničení a 0 nezobrazovat ohraničení rámečku.
  • Marginwidth: Umožňuje definovat mezeru mezi levou a pravou stranou rámu
  • Marginheight: Umožňuje definovat mezeru mezi horní a dolní částí rámu.
  • Posouvání: Tyto atributy slouží k ovládání toho, zda se bude posuvný rámeček zobrazovat v rámečku. zahrnuty jsou hodnoty „ano“ nebo „ne“ nebo „auto“.
  • Výška: Slouží k definování výšky rámu. Počasí v% nebo v pixelech
  • Šířka: Sloužila k definování šířky rámu. Počasí v% nebo v pixelech
  • Longdesc: Pomocí tohoto atributu můžete propojit další stránku, která má dlouhý popis obsahu vašeho rámečku.

Příklady prvků iframe v HTML

Zde je několik příkladů prvků iframe v HTML, které jsou vysvětleny níže:

Příklad č. 1

Podívejme se na jeden příklad, ve kterém si ukážeme, jak vytvořit iframe se specifickou výškou a šířkou.

Kód:

Ukázka HTML prvků iframe


Zde zobrazujeme příklad prvku iframe, který obsahuje specifc výšku a šířku ve formátu pixelů

Výstup:

Příklad č. 2

Podívejme se na další příklad, ve kterém si ukážeme, jak vytvořit iframe se specifickou výškou a šířkou. V tomto příkladu však určujeme výšku a šířku pomocí CSS. Zde vidíme, že posuvník je upravován podle velikosti obsahu.

Kód:

Ukázka HTML prvků iframe


Zde zobrazujeme příklad prvku iframe, který obsahuje specifc výšku a šířku ve formátu pixelů

Výstup:

Příklad č. 3

Zde uvažujeme jeden příklad, do kterého přidáme ohraničení do prvku iframe přidáním dalších vlastností CSS k zobrazení změny velikosti hranice, změny barvy okraje atd. Takže můžeme přidat co nejvíce styl našeho iframe.

Kód:

Ukázka HTML prvků iframe


Zde zobrazujeme příklad prvku iframe, který obsahuje hranici s některými dalšími vlastnostmi CSS

Výstup:

Příklad č. 4

Podívejme se na další příklad, ve kterém se chystáme ukázat, jak cílový atribut otevírá odkaz na webovou stránku pomocí prvku iframe.

Kód:

Ukázkový cíl iframe pro odkaz


EDUCBA

Když se cíl odkazu shoduje s názvem prvku iframe, odkaz se otevře v prvku iframe.

Výstup:

Cílový výstup:

Jak je uvedeno výše Příklad jsme schopni kliknout na cílový odkaz EDUCBA, takže se otevře následující webová stránka uvedená níže.

Závěr

Ze všech výše uvedených informací došlo k závěru, že iframe je vložený rámec, který obsahuje další dokument HTML do sebe. Považoval se za nejvýkonnější prvek HTML pro účely návrhu webových stránek. S jeho pomocí můžete také přidat nějaký obsah z jiného zdroje. Používá různé druhy HTML atributů, jako jsou globální atributy, atributy událostí, některé související stránky atd.

Doporučené články

Toto je průvodce iframe v HTML. Zde diskutujeme syntaxi, atribut značky iframe v HTML spolu s různými příklady a implementací kódu. Další informace naleznete také v následujících článcích -

  1. Příkazy pro selen
  2. Rámce HTML
  3. HTML textový odkaz
  4. Vytvořit tabulky v HTML

Kategorie:

Nástroje pro vývoj webových aplikací