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ý. To ukazuju i v dalším příkladu na iframe.

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.
loading="lazy"
odloží načítání vnitřku iframe až do chvíle, než se dostane uživateli na obrazovku nebo blízko pod ni. (O opožděném načítání.)
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ř".

Pokud se nezadají rozměry width a height, je obvykle výchozí šířka 300px a výška 150px.

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í

Vnořené rámy se dají vcelku dobře používat. Nejčastěji se využívají jako reklamy, počitadla, nebo pro usnadnění práce autora. Určitě vymyslíte spoustu možností. Důležité je vědět, že iframe 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.

Jak se bránit vkládání do iframe

Zatím jsem probíral, jak iframe udělat. Občas je potřeba naopak zabránit tomu, aby si cizí web dával moji stránku do iframe k sobě. Jsou dvě řešení:

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
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.