Pixy: články

Javascript - rozměry okna dokumentu

Jednou z nejkomplikovanějších a přitom velmi často potřebnou funkcí Javacsriptu je zjištění rozměrů plochy dokumentu, která je právě zobrazená v okně prohlížeče - neboli vnitřní velikosti okna (viewportu). Každý prohlížeč to dělá po svém a vytvořit co nejkompatibilnější funkci vyžaduje trochu víc práce.

Část starších prohlížečů ukládá tyto rozměry jako vlastnosti innerWidth/innerHeight objetu window, jiné (především MSIE) zase jako clientWidth/clientHeight objektu document.body, nejnovější pak používají v souladu s DOM2 document.documentElement. Hodnoty, které vrací některé typické prohlížeče, jsou znázorněny v tabulce (příklady jsou uvedny pro výšku; pro innerWidth/clientWidth platí totéž):

--- window.innerHeight document.body.clientHeight document.documentElement.clientHeight
NN4 výška okna --- ---
Opera6, NN6/Moz výška okna výška okna N/A
Opera7 výška okna výška okna výška dokumentu
MSIE5.5-, MSIE6-quirk --- výška okna ---
MSIE6-standardní --- výška dokumentu výška okna
Ostatní větsina vrací výšku okna většina vrací výšku okna některé vrací výšku dokumentu

Pozn.: MSIE6 se chová rozdílně podle typu dokumentu - striktní dokumenty zpracovává ve standardním režimu (podstatně více dodržuje specifikace W3C), ostatní dokumenty pak v tzv. quirk režimu, který odpovídá chování starších verzí MSIE včetně všech obvyklých chyb.

Chci-li napsat funkci, vracející rozměr okna (např. winW() [šířka] a winH [výška]), musím použít všechny tyto dostupné metody, abych pokryl co nejvíce prohlížečů. Podporuje-li použitý prohlížeč některou z vlastností, prátí rozměr okna; v opačném případě funkce vrátí null a skript musí použít náhradní řešení. Testovat prohlížeče podle jména, verze a platformy je značně neefektivní, daleko lepší bude pouze ověřit, zda podporují objekt a vlastnost, které chci najít.

function winH() {
   if (window.innerHeight)
      /* NN4 a kompatibilní prohlížeče */
      return window.innerHeight;
   else if
   (document.documentElement &&
   document.documentElement.clientHeight)
      /* MSIE6 v std. režimu - Opera a Mozilla
      již uspěly s window.innerHeight */
      return document.documentElement.clientHeight;
   else if
   (document.body && document.body.clientHeight)
      /* starší MSIE + MSIE6 v quirk režimu */
      return document.body.clientHeight;
   else
      return null;
}

Funkce winW() vracející šířku vypadá stejně, jen místo height je všude width. Skript si můžeme vyzkoušet: ukaž rozměry okna.

Pozn.: v tomto tvaru funkce vrátí rozměry nejbližšího "okna", pokud je stránka v rámu, vrátí jeho rozměry. Stačí ale změnit objekt window na top, nebo doplnit parametr, kterým určíme, rozměry kterého okna chceme zjistit. Např.:

function winH(w) {
   if (!w) w = top;
   if (w.innerHeight) ...
   ...
   (w.document.body && w.document.body.clientHeight)
      return w.document.body.clientHeight;
   else
      return null;
}
TOPlist