C a C++ týden ITnetwork Flashka zdarma
Akce! Pouze tento týden sleva až 80 % na kurzy C++. Lze kombinovat s akcí 50 % bodů navíc na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

iframe - Český HTML 5 manuál

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Tag <iframe> do HTML stránky vloží rámec, ve kterém je zobrazen jiný HTML dokument. Jedná se o řádkový tag, odtud název iframe (= inline frame, řádkový rámec).

<iframe> se často používá k vložení služeb cizích webů (widget s počasím, anketou apod.).

Element je párový a obaluje alternativní obsah, který se zobrazí prohlížečům, které nepodporují rámce.

Atributy

Elementu můžeme uvést následující atributy:

  • height - Udává výšku rámu v pixelech.
  • name - Udává jméno rámu. Pokud ve stránce, ve které je <iframe> vložený, uvedeme odkaz. Můžeme mu nastavit atribut target na jméno rámce a odkaz se poté otevře v daném <iframe>.
  • sandbox - Umožňuje zakázat některé akce na stránce v <iframe> z hlediska bezpečnosti. To se hodí zejména tehdy, když v <iframe> zobrazujeme cizí stránku. Pokud neuvedeme hodnotu atributu (sandbox=""), zapnou se všechna bezpečnostní opatření. Opatření můžeme upřesnit uvedením následujících hodnot (můžeme uvést více hodnot oddělených mezerou):
    • allow-same-origin - Povolí stejný origin vloženého a vkládaného dokumentu.
    • allow-top-navigation - Povolí obsahu rámce, aby se navigoval na stránku, ve které je vložen.
    • allow-forms - Povolí odesílaní formulářů.
    • allow-scripts - Povolí spouštění skriptů.
  • seamless - Atribut je typu boolean. Pokud je uveden, je dokument v <iframe> zobrazen tak, jako by byl součástí hlavního dokumentu.
  • src - URL adresa zobrazovaného dokumentu.
  • srcdoc - Umožňuje přímo specifikovat vložený dokument, obsahuje tedy HTML kód.
  • width - Udává šířku rámu v pixelech.

Ukázka použití

<p>Iframe slouží k vložení rámce s dalším HTML dokumentem. Podívejme se na Seznam:</p>

<iframe src="http://www.seznam.cz" width="530" height="300">
Váš prohlížeč nepodporuje rámce. Přejděte manuálně na
<a href="http://www.seznam.cz">obsah rámce</a>.
</iframe>

Výsledek:

Ukázka použití HTML 5 tagu iframe k vložení stránky pomocí rámce

 

 

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Všechny články v sekci
Ostatní tagy - Český HTML 5 manuál
Aktivity (1)

 

 

Komentáře

Avatar
raito
Člen
Avatar
raito:7.5.2014 13:53

Stálo by za zmínku, že v souvislosti s clickjackingem došlo k omezení "funkčnosti" iframu pomocí hlaviček zasílaných serverem. Proto například není možné načíst do iframu jen tak třeba http://google.com/ nebo http://facebook.com. Více se dá dočíst zde:

http://www.soom.cz/…ickjacking-1

a zde se dá jednoduše ozkoušet, zda-li stránka půjde pomocí iframu zobrazit:

http://www.soom.cz/…ster-on-line

Na některé weby lze poté skrze attribut sandbox aplikovat nastavení

sandbox="allow-same-origin allow-scripts allow-forms"

, což někdy může tento problém částečně vyřešit.

Odpovědět 7.5.2014 13:53
Asi sem usnul. Co se dělo posledních... 5 let?
Avatar
Vakos
Redaktor
Avatar
Vakos:17.7.2014 20:49

Jak se dá tento tag vycentrovat?

Odpovědět 17.7.2014 20:49
"Jediný způsob, jak dělat skvělou práci, je milovat to, co děláte. Pokud jste to ještě nenašli, hledejte dál. Ne...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Vakos
David Čápka:17.7.2014 20:53

Proč by se nedal, je to normální inline tag, dáš ho do divu s text-align: center;

Odpovědět 17.7.2014 20:53
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Vakos
Redaktor
Avatar
Odpovídá na David Čápka
Vakos:17.7.2014 20:53

Bez divu to nejde? Vím, že s divem to půjde, ale jestli přímo iframe

Odpovědět 17.7.2014 20:53
"Jediný způsob, jak dělat skvělou práci, je milovat to, co děláte. Pokud jste to ještě nenašli, hledejte dál. Ne...
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Vakos
Ondrca:17.7.2014 20:56

zkus toto:

iframe{
display: block;
margin-left: auto;
margin-right: auto;
}
Editováno 17.7.2014 20:57
Odpovědět 17.7.2014 20:56
Zase jsem o něco chytřejší
Avatar
Vakos
Redaktor
Avatar
Odpovídá na Ondrca
Vakos:17.7.2014 21:01

Moc díky. trošku přemýšlím co je lepší, jestli přes div a nebo tady tu tvou verzi, ale asi u delšího kódu lepší to tvoje, kvůli lepší přehlednosti v html

Odpovědět 17.7.2014 21:01
"Jediný způsob, jak dělat skvělou práci, je milovat to, co děláte. Pokud jste to ještě nenašli, hledejte dál. Ne...
Avatar
Vlaďa
Člen
Avatar
Vlaďa:14.12.2015 17:51

Potřeboval bych poradit s odkazem na "iframe", který mám na konci webové stránky:
<iframe id="iframe" name="odkazy" width="100%" height="400" frameborder="2" scrolling=yes></i­frame>
Do něj se odkazuji z článku na webové stránce:
<a href="1Mo1a.html" target"odkazy">Poz­n.001<a> (použito normálně /a, ale tady nešlo uzavření tagu zobrazit)
Už delší dobu nemohu přijít na to, jak současně s odkazem na načtení poznámky do "iframe" spojit i příkaz přesunutí na záložku id="iframe".
Původně jsem zkoušel poznámku zobrazit pomocí:
<a href="1Mo1a.html" onclick="window­.open('1Mo1a.html'); return false"; "location=no,sta­tus=no,width=250,he­ight=200,resi­zable">Pozn.001<a> (viz pozn. výše), ale pod Androidem 4.2 se mi neustále zobrazuje jen okno přes celou obrazovku včetně adresního řádku a tak jsem se rozhodnul pro "iframe".
Moc zkušeností nemám a tak budu vděčný za jakoukoliv pomoc

 
Odpovědět 14.12.2015 17:51
Avatar
danhosek
Člen
Avatar
danhosek:28.1.2016 20:37

je možné odkazem v iframe přejít na jinou stránku ve stejném okně prohlížeče?
(nemyslím změnu page uvnitř iframe, ale změna celé page na kterým je iframe)??
děkuji za pomoc.

 
Odpovědět 28.1.2016 20:37
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na danhosek
Tonda Kozák:28.1.2016 22:17

Je: http://www.jakpsatweb.cz/iframe.html#…

<a href="jina_stranka.htm" target="_parent">Odkaz z ifrejmu do rodičovského okna</a>
 
Odpovědět  +1 28.1.2016 22:17
Avatar
danhosek
Člen
Avatar
Odpovídá na Tonda Kozák
danhosek:28.1.2016 22:28

díky moc :) našel jsem podobný target: _top

 
Odpovědět 28.1.2016 22:28
Avatar
mkub
Redaktor
Avatar
Odpovídá na danhosek
mkub:28.1.2016 23:12

_parent robi uplne nieco ine, nez _top

 
Odpovědět 28.1.2016 23:12
Avatar
Lukáš Němeček:25.2.2016 9:44

Dobrý den,
chtěl bych se prosím zeptat, nebude to asi přímo k tématu, ale potřebuje na eshop kopírovat texty(popisy-do okna na eshopu - dlouhý text), popisy máme uložené ve wordu, zkoušeli jsme je vyexportovat do html a nahrát hromadně přes účetní program na eshop, ale je problém, že na eshopu nám tento text mění i celou strukturu, stránek( například barvu textu v patě, barvu textu u přihlášení atd.). Bylo by řešení iframe? Lze nějak to dostat třeba z wordu nebo libreoffice do toho formátu iframe hromadně? Nebo to lze řešit nějak jinak?
Moc děkuji za odpověď

 
Odpovědět 25.2.2016 9:44
Avatar
alfonz
Člen
Avatar
Odpovídá na Lukáš Němeček
alfonz:25.2.2016 10:02

Vkládat takto texty do eshopu je proti všem praktikám SEO. Prohlížeče tento text vůbec nemusí přečíst a už vůbec mu nebudou přidávat žádnou váhu. Nejlepší by asi bylo ten text přespat třeba do markdownu a ten pak lze snadno převést do HTML.

Odpovědět 25.2.2016 10:02
lmao
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Lukáš Němeček
Taskkill:25.2.2016 11:15

ty budes spis potrebovat nejakej rozumnej editor, kterej ti prevede ten formatovanej text do toho eshopu, pokud mas komunitni reseni (nejakej velkej projekt jako opencart a podobne) tak to muze poresit nejakej plugin, pokud to nezmakne vestavenej editor... pokud mas vlastni system a ten tohle neumi, tak je treba to poresit jinak, word text exportovat do html, ale rozumne, asi nejakym jinym nastrojem new MS Wordem ... a nemel by byt velky problem to do toho dostat ... nebo jak rika Denis, prepsat to nacisto do neceho vic exportu privetiveho

 
Odpovědět 25.2.2016 11:15
Avatar
Lukáš Němeček:25.2.2016 15:09

Děkuji za odpověď
,máte tedy prosím nějaký tip na program v kterém tedy ty texty zpracovávat a poté exportovat?
Eshop máme na řešení od http://www.upgates.com/cz/
Popisy máme teď ve formátu .docx a vyexportovali jsme si je do html.
V příloze zasílám ukázku souboru.

 
Odpovědět 25.2.2016 15:09
Avatar
Standa
Člen
Avatar
Standa:30.4.2017 13:09

ahoj,

jak se dá dočíst tak plno věcí nejde do iframe dat aby to fungovalo.

např. seznam co je v příkladu mě už nefunguje

<iframe src="http://www.seznam.cz" ></iframe>

tohle funguje

<iframe src="https://www.itnetwork.cz/" ></iframe>

Dělám webovou mapovou JS aplikaci a chci aby šla vkládat na ostatní stránky přes iframe.
Lze to ještě nějak ošetřit ? (na mé straně)

A nebo je to jedno a když to nijak nikde nebudu zakazovat tak to prostě vždycky poběží?

 
Odpovědět  +1 30.4.2017 13:09
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 16 zpráv z 16.