Minule jsme se seznámili s funkcí window.open a jejími parametry. Dnes se podíváme jak zařídit, aby se okno otevřelo až po kliknutí na určitý odkaz. 

Vše budeme realizovat pomocí události onClick. Podívejme se nejdříve na kód:

<a href="#" onClick="window.open('stranka.htm', 'mojeokno', 'resizable,status,scrollbars=no,width=300,height=80,top=20,left=20')">odkaz</a>

a ukázka je zde:
odkaz

V kódu výše je použit "prázdný odkaz" href="#" a tak je zajištěno především zobrazení "odkazového" kurzoru (ruka), dále následuje definice akce, která nastane po kliknutí na odkaz (onClick). Často nastávají chyby při záměně apostrofů a uvozovek. Ovšem stačí si pamatovat, že používají-li se v kódu uvozovky i apostrofy, pak uvozovky jsou "vně" a apostrofy "uvnitř". V tomto kódu ohraničují uvozovky funkci, která se uskuteční po kliknutí a apostrofy ohraničují parametry funkce window.open. Otevření okna nemusí být samozřejmě vázáno jen na kliknutí. Lze použít jakoukoli javascriptovou událost a nechat okno otevřít například po odeslání formuláře (onSubmit) či po opuštění stránky (onUnLoad) atp.

Pokud jste vyzkoušeli ukázkový odkaz, všimli jste si pravděpodobně, že okno je možno zavřít kliknutím na odkaz "Zavřít". Není totiž nic jednoduššího, než si do stránky, která se zobrazuje v okně (vyvolaném javascriptem) přidat takový odkaz:

<a href="#" onClick="window.close()">Zavřít</a>

Vycentrování okna

V souvislosti s definováním pozice okna vám na mysli mohla vytanout otázka "Jak zařídit vycentrování okna na obrazovce, když každý návštěvník může používat rozdílné rozlišení obrazovky?". I to lze vcelku snadno zařídit, neboť rozlišení obrazovky návštěvníka stránek lze zjistit pomocí javascriptu v proměnných screen.width a screen.height. 

Pro zajištění přehlednosti kódu a snadnou modifikaci při změně velikosti okna, je vhodné si velikost okna (X a Y rozměr) uložit do proměnných a propočítat pozici okna "dopředu".

<script language="JavaScript">
win_size_x=300; //horizontální velikost okna
win_size_y=80; //vertikální velikost okna
win_pos_x=(screen.width-win_size_x)/2; //horizontální pozice okna
win_pos_y=(screen.height-win_size_y)/2; //vertikální velikost okna
</script>

Výše uvedený kód je třeba vložit do těla HTML a to tak, aby byl zapsán dříve (výše) než první použití funkce window.open. Ze skriptu je zřejmé, že pozice okna se vypočítá jako polovina rozdílu šířky (resp. výšky) obrazovky a šířky (resp. výšky) okna. Ve funkci window.open již nyní můžeme využít deklarované proměnné win_size_x, win_size_y, win_pos_x, win_pos_y.

Kód pro otevření okna pomocí window.open vyvolaný po kliknutí na odkaz pak bude vypadat následovně:

<a href="#" onClick="window.open('stranka.htm', 'vycentrovaneokno', 'resizable,scrollbars=no,width=' + win_size_x + ',height=' + win_size_y + ',top=' + win_pos_y + ',left=' + win_pos_x)">odkaz</a>

a na konec ukázka:
odkaz

Pecka Miroslav