Iframe

vnořený rám

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

Všechny moderní prohlížeče 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="ramecek"></iframe>

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 "ramecek".

Další ovlivnění vzhledu

Vzhled všeho, co bude v tom iframe, se dá nastavit pouze v tom vloženém souboru. Nejde to z vnějšího. Například tedy barva pozadí té vnořené stránky se musí definovat ve vnořené stránce. Dokonce i rámečky iframu se nejlépe udělají stylováním body pomocí border ve vnitřním souboru. Taktéž barvení rolovací lišty se musí dělat "zevnitř".

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: prohlížeč celý zbytek dokumentu považuje za alternativu.

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 zejména v reklamách. Určitě vymyslíte spoustu možností. Důležité je vědět, že to existuje. Iframem se dost zabývám v textu o Skládání stránek z kousků.

Formulář v jiném kódování

Iframe nabízí řešení častého problému: Pokud musím odeslat ze stránky formulářem údaje do v jiném kódování, než v jakém mám stránku udělanou, bez iframe to asi nejde. Do iframe se dá stránka jinak kódovaná, do ní se dá formulář a formuláři se nastaví target="_parent".

Nelze nastavit rozměry podle obsahu iframe

Nepříjemné je, že nejde udělat takový iframe, který by měnil rozměry podle velikosti vnitřního dokumentu. Rozměry width a height je nutno zapsat napevno při konstrukci vnější stránky. Možná by na to šel napsat nějaký javascript, ale ještě jsem neodladil nic funkčního.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.