iframe

Praktický nástroj při řešení určitých zámyslů na webu.

Iframe umožňuje vložit do webové stránky náhled na webové stránky jiné (zdrojové) s tím, že lze ovládat prvky na stránce zdrojové.

Praktické příklady použití iframe pro laiky, kteří mají svůj web a chtějí jisté věci vyřešit snadno a rychle:

1/ zobrazení tlačítka na webu, (pohled na jinou stránku s tlačítkem, které např. odešle magic packet a Vy si tak jedním kliknutím probudíte vzdálený (hibernovaný) PC. Níže z bezpečnostních důvodů uvádím příklad, kterým mi neprobudíte PC v síti, ale po stisku tlačítka se otevřete nové webové okno (seznam.cz), které se automaticky zavře po 5ti vteřinách – skript)

2/ z prvního příkladu je zřejmé, že si pomocí iframe můžete do nějaké své stránky zobrazit funkční tlačítko z jakéhokoli jiného IP zařízení, které má webové rozhraní. Tak např. IP inteligentní zásuvku na 230v, která má na svém webovém rozhraní tlačítko k zapnutí či vypnutí výstupního napětí, čímž ovládáte po internetu zapnutí/vypnutí libovolného elektrického spotřebiče ve své domácnosti (reset PC, IP kamery, nebo třeba elektrického topení, světla apod.).

3/ zobrazení obrazů z více IP kamer na jedné stránce. Sám používám na svém odkazu Kamery, ovšem obsah pochopitelně není veřejně dostupný. Vloží se pod sebe více iframů, z nichž každý zprostředkovává pohled na webové rozhraní každé jednotlivé IP kamery.

4/ zobrazení videa např. z archivu ČT na svých stránkách – praktický příklad použití.

Příkladů by se dalo vymyslet hodně. Níže uvádím pro názornost iframe na titulní stránku svého vlastního webu. Jednak klasický iframe s posuvníky a níže iframe zobrazující konkrétní výřez ze zdrojové stránky.

Klasický iframe s minimální konfigurací (zarovnaný do leva, ohraničený červeným rámem a bez posuvníků)

<p align=“left“><iframe style=“border: 1px solid red;“ src=“https://jaromir-hybner.cz“ width=“320″ height=“240″></iframe></p>

(posuvníky lze přidat jako poslední údaj za height=“240″ parametrem scrolling=“yes“ (analogicky „no“). Pokud se parametr neuvede, tak se posuvníky zobrazí dle potřeby.


Obsah uvnitř modrého iframe je již umístěn na požadovanou pozici (hlavní menu – Upomínky):

 

Skript:

<div style=“border: 1px solid blue; width: 80px; height: 80px; overflow: hidden; text-align: justify;“><iframe style=“width: 600px; height: 900px; margin-top: -330px; margin-left: -420px;“ src=“https://www.jaromir-hybner.cz“ width=“320″ height=“240″></iframe></div>


  • zvýšení hodnot parametrů: <iframe style=“width: 400px; height: 800px;… – má za následek rozšíření „podkladu“ ze zdrojové stránky, po které se pohybuje „zaměřovač“. Je to zkrátka jakési pole, které má levý horní roh v levém horním rohu zdrojové stránky, a povyšováním šířky a výšky jakoby jsme „táhli“ za pravý spodní roh a zvětšovali výřez podkladové stránky, ze které se následně úpravou okrajů ořezává shora (margin-top) a zleva (margin-left).
  • zvýšení záporné hodnoty parametru: <iframe style=“width: 400px; height: 800px; margin-top: -300px; margin-left: -200px;“… – má za následek zvýšení ořezu zdrojové stránky zleva
  • zvýšení záporné hodnoty parametru: <iframe style=“width: 400px; height: 800px; margin-top: -300px; margin-left: -300px;“… – má za následek zvýšení ořezu zdrojové stránky shora
  • původní zdroj – ANJ
  • www.jakpsatweb.cz