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í:
- javascriptem zkontrolovat, jestli je nejvyšší okno stejné jako aktuální okno. To v případě iframe neplatí, takže
- nastudovat si, jak se nastavují http hlavičky a stránky posílat s
http hlavičkou
content-security-policy: frame-ancestors 'self'
Reklama
