Iframe

vnořený rám

Příklad - Atributy tagu IFRAME - Alternativa - Odkazy tam a zpátky - Použití

Všechny moderní prohlížeče kromě Netscape 4.x podporují tag <iframe>. Ten umožňuje vložit do stránky rám přesné velikosti a zobrazit v něm jinou stránku (té říkám "vnořená"). Je to pak hodně podobné obrázku, akorát že obsah může být zcela libovolný (textový a rolovaný). Iframe se čte ífrejm, anglicky ajfrejm a v českých textech se také občas označuje jako plovoucí rám.

Příklad

V HTML kódu to vypadá takhle:

<iframe src="priklad15.htm" width="300" height="100">

</iframe>

Na stránce se potom objeví toto:

Hezké, ne?

Všimněte si prosím, že tag <iframe> je párový.

Atributy tagu <iframe>

src

jak jistě chápete, atribut src obsahuje URL k souboru vnořené stránky. To může být klasicky relativní (jako v tomto příkladu) nebo absolutní.

width a height

šířka a výška. Hodnotou může být velikost v pixelech nebo v procentech. Přitom klasicky procentuální šířka se odvozuje z šířky stránky, kdežto výšková procenta se počítají z výšky okna. Satrapa tvrdí, že procenta zadávat nelze, takže to možná není ve specifikaci; ale funguje to.

scrolling

pokud se dá scrolling=no, pak se nezobrazí rolovací lišty a vnořenou stránkou nepůjde rolovat. Scrolling=yes zobrazí pravou rolovací lištu bez ohledu na to, je-li potřeba. Pokud se scrolling neuvede, lišty se zjevují podle potřeby.

frameborder

frameborder=0 vypne zobrazování rámečků kolem vnořeného rámu (asi jenom v IE). Jiné hodnoty nefungují. Atribut border ani framespacing nefunguje a nemá žádný vliv (alespoň v IE ne).

marginheight, marginwidth

vnitřní okraje vnořené stránky v pixelech

align

nastavení obtékání (hodnoty right a left) nebo poloha na řádku (ostatní hodnoty). Je to to samé jako u obrázků.

name

jméno vnořeného rámu, použitelné u odkazů (atribut target), které mají mířit do vnořeného rámu.

ostatní atributy

dá se použít také class, id a style. Doufám, že jsem na nic nezapomněl.

Příklad

<iframe src="rainbow.htm" width=50% height=30 frameborder="0" align="baseline" scrolling=no name=ifrejm>

zobrazí vnořený rám přes půl šířky stránky vysoký 30 pixelů, bez rámečků a lišt. V rámu bude stránka rainbow.htm. Zarovnaný bude na základnu řádku. Jmenuje se ifrejm.

Alternativa

Co se zobrazí v prohlížečích, které <iframe> nepodporují?

Tam se zobrazí to, co je mezi značkami <iframe> a </iframe> (tedy v "obsahu" tagu).

<iframe src="priklad15.htm" width="300" height="100">

Alternativní obsah.

</iframe>

Prohlížeče, které <iframe> podporují, musejí alternativní obsah ignorovat. Z toho mimo jiné vyplývá, že pokud zapomenete </iframe>, jste v rejži.

Starší prohlížeče bez podpory alternativní obsah zobrazují. Bývá zvykem dávat do alternativního textu odkaz na vnořenou stránku, aby se k ní dalo dostat přes libovolný prohlížeč. To je dobré mimochodem také pro vyhledávací roboty.

Odkazy tam a zpátky

Odkazy se dají nasměrovat do různých rámů pomocí atributu target u odkazu.

Z nadřazeného do vnořeného

<a href="stranka.htm" target="ifrejm">Odkaz do ifrejmu</a>

<iframe name="ifrejm" ...></iframe>

V odkazu se použije u targetu jméno vnořeného rámu (to je atribut name).

Z vnořeného do nadřazeného

Možná vás napadne, že vnořená stránka nemůže vědět, jak se jmenuje nadřazený rám. No to opravdu nemůže. Naštěstí existuje generické jméno rámu _parent, které označuje rodičovský rám. Ve vnořené stránce bude:

<a href="jina_stranka.htm" target="_parent">Odkaz z ifrejmu do rodičovského okna</a>

Po kliknutí samozřejmě zmizí obě dvě stránky, protože se načte úplně jiná stránka.

Pokud je tam takových odkazů víc, vyplatí se vložit do hlavičky vnořené stránky tag <base target="_parent">.

Z vnořeného do vnořeného

Úplně normálně bez atributu target.

Použití

Protože prohlížeč Netscape 4 je na ústupu, dají se vnořené rámy vcelku dobře používat.  Nejčastěji se využívají jako různá menu nebo pro usnadnění práce autora. V poslední době je vídám dokonce v reklamách. Určitě vymyslíte spoustu možností. Důležité je vědět, že to existuje.

Předchozí: Proč nepoužívat rámy
Vizte též: Formátování rámů, Odkazy v HTML

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage JavaScript