Dynamicky generovaný iframe

V súčasnosti sa element IFRAME opäť začína celkom často používať. Aj keď sa obvykle používa na niečo trochu iné, než k čomu bol pôvodne určený. Dynamicky generované iframy majú svoje úskalia, ktoré by ťa mohli stáť pekných pár hodín strávených zúfalým hľadaním podkladov a debugovaním. Stačí však o nich vedieť a dá sa im ľahko vyhnúť.

frameborder versus frameBorder

Defaultne má iframe okolo seba hnusný border. Ten sa dá odstrániť nastavením atribútu frameborder:

<iframe src="/zdroj/iframu/" frameborder="0"></iframe>

Problém nastáva v momente, kedy je iframe generovaný dynamicky a atribút frameborder sa mu pridáva javascriptom:

var mojIframe = document.createElement( 'iframe' );
mojIframe.frameborder = '0';
document.body.appendChild( mojIframe );

Napriek všetkým očakávaniam tam ten hnusný border furt bude. Mrkni na ukážku.

Čo s tým? Zmanená to, že sa iframy musia vkladať pomocou innerHTML? Dá sa toho borderu nejako rozumne zbaviť? Áno, dá. Finta je v tom, že atribút frameborder je case-sensitive a keď sa dynamicky priraďuje javascriptom, musí sa písať camelCase. Čiže frameBorder.

Toto v pohode zafunguje:

var mojIframe = document.createElement( 'iframe' );
mojIframe.frameBorder = '0';
document.body.appendChild( mojIframe );

URL prázdneho iframu

Dosť často sa IFRAME do dokumentu vkladá kvôli svojej zázračnej schopnosti prekryť elementy ako SELECT alebo embedované flashové video. U takého iframu je celkom jedno, čo sa v ňom zobrazí (ideálne nič).

Ak sa jeho atribút src nechá prázdny, bude to vo väčšine prípadov v pohode. Browser do iframu buď nič nenatiahne, alebo do neho vloží prázdnu stránku (v podstate about:blank). Problém však nastane v prípade, že stránka bude podliehať nejakým bezpečnostným kontrolám. Napríklad ak bude servírovaná protokolom HTTPS. V tom momente bude browser kričať, že sa snažíš vložiť nezabezpečený dokument do zabezpečenej stránky.

Sú teda dve možnosti:

1. Vytvoriť prázdny dokument, ktorý bude publikovaný na rovnakej doméne (a protokole) ako rodičovský dokument. Tento prázdny dokument potom použiť ako obsah iframu.
2. Alebo jednoducho nastaviť src atribút iframu na javascript:false;

Element.toIframe()

Ešte malý bonus na záver: Malá a jednoduchá metóda pre Prototype, ktorá nahradí existujúci element iframom:

Element.addMethods({
  toIframe : function ( element, url, options ) {
    var element = $( element );
    var options = Object.extend( {
      src : url || 'javascript:false;', // ak nie je uvedena, pouzije sa prazdna stranka
      frameBorder : 0, // pozor na camelCase
      scrolling : 'no', // ak 'yes', tak ich IE zobrazi vzdy, aj ked ich nie je treba
      width : element.getWidth(),
      height : element.getHeight(),
      id : element.id
    }, options || {} );
    var iframe = new Element( 'iframe', options );
    element.replace( iframe );
    return iframe;
  }
});

Snáď ju netreba komplikovane popisovať. Pozri sa na praktickú ukážku.

Súvisiace články

1. Zvýrazňovanie zaškrtnutých položiek
2. Filtrovanie obsahu dokumentu bez použitia Ajaxu
3. Pridávaním metód k fajnovému hoveru
4. Políčka s hintom
5. onResize event