NovΘ okno

otev°enΘ odkazem

P°φklad - Techniky otevφrßnφ novΘho okna - Target v HTML - Javascriptem window.open() - Parametry, li╣ty, rozm∞ry, umφst∞nφ - Zp∙soby volßnφ window.open() - NovΘ okno v editorech - Pro a proti nov²m okn∙m

P°φklad

<a href="http://www.jakpsatweb.cz" target="_blank">Odkaz se otev°e do novΘho okna</a>

M∙╛ete zkusit: Odkaz se otev°e do novΘho okna

Techniky otevφrßnφ novΘho okna 

NovΘ okno lze otev°φt s vyu╛itφm: 

Target v HTML

Target znamenß anglicky "cφl". Atribut target u odkazu znamenß cφlovΘ okno nebo cφlov² rßm.

target="_blank"

P°i volßnφ novΘho okna se pou╛φvß zßpis

<a href=".." target="_blank">text odkazu</a>

_blank je vyvolenß hodnota, kterß znamenß v╛dy novΘ okno. P°i aktivaci takovΘho odkazu se u╛ivateli otev°e novΘ okno, kterΘ: 

Je to prost∞ normßlnφ okno prohlφ╛eΦe. Nenormßlnφ okno se dß ud∞lat jenom javascriptem. 

JmΘno okna -- target="cokoliv"

Co se stane, kdy╛ napφ╣u odkaz s libovolnou hodnotou target?

<a href=".." target="cokoliv" >text odkazu</a>

nap°. tedy konkrΘtn∞ji:

<a href="http://www.jakpsatweb.cz" target="ahoj" >odkaz do okna ahoj</a>

Zkuste si: odkaz do okna ahoj

Po kliknutφ se takΘ otev°e novΘ okno. Na prvnφ pohled v╣echno v po°ßdku. Jak² je tedy rozdφl mezi target="_blank" a target="cokoliv"

P°i kliknutφ na odkaz s target="ahoj" si prohlφ╛eΦ zapamatuje, ╛e novΘ okno se jmenuje "ahoj" a dal╣φ odkazy posφlß do n∞j. To se n∞kdy hodφ, ale ve v∞t╣in∞ p°φpad∙ je to na zlost. TakovΘ pojmenovanΘ okno toti╛ z∙stßvß v pozadφ (nemusφ b²t vid∞t) a p°i aktivaci druhΘho odkazu se nep°epne do pop°edφ (nechytφ focus). (Zkuste si podruhΘ kliknout na odkaz do okna ahoj.) U╛ivatel si toho v∙bec nemusφ v╣imnout a domnφvß se, ╛e se po kliknutφ na odkaz nic nestalo.

To je d∙vod, proΦ pro novΘ okno v╛dycky doporuΦuji pou╛φvat target="_blank", proto╛e novΘ okno se nijak nejmenuje a vyskoΦφ do pop°edφ i napodruhΘ (proto╛e se prost∞ ud∞lß novΘ).

V╣echny odkazy do novΘho okna

Dß se za°φdit, aby se v╣echny odkazy na strßnce otevφraly do novΘho okna. Do hlaviΦky HTML strßnky se p°idß zßpis:

<base target="_blank">

v╣echny odkazy na celΘ strßnce se potom chovajφ tak, jako by m∞ly target="_blank" a otevφrajφ se tedy do novΘho okna. 

Jak potom za°φdit, aby se n∞jak² odkaz otevφral ve stejnΘm okn∞? Do odkazu se napφ╣e  target="_self". Nijak jednodu╣eji to nejde.

Formulß° do novΘho okna

Je to hodn∞ podobnΘ odkaz∙m. P°φklad:

<form action="n∞jak²_skript.t°eba.php" target="_blank">...</form>

Odeslan² formulß° se prost∞ realizuje v novΘm okn∞.

Musφm zmφnit rßmy

Target se pou╛φvß na dv∞ v∞ci:

  1. otevφrßnφ nov²ch oken (o tom te∩ pφ╣u)
  2. sm∞rovßnφ odkaz∙ v rßmech (o tom tady nepφ╣u a pro novß okna to nenφ d∙le╛itΘ)

Javascriptem window.open()

Dost Φasto m∙╛ete chtφt, aby novΘ okno m∞lo p°esnΘ rozm∞ry, nem∞lo li╣ty a takovΘ ty blbosti, nebo aby se otevφralo p°es celou obrazovku. V╣echno to umφ javascriptovß metoda  window.open(). Tuto metodu si prostudujte, pokud tomu chcete rozum∞t po°ßdn∞. Nßsledujφcφ text se mi docela zkomplikoval, problematika si to vy╛aduje. Kdy╛tak to p°eskoΦte.

P°φklady 

Nejjednodu╣╣φ mo╛n² p°φklad otev°e novΘ okno se strßnkou index.html podobn∞ jako target="_blank":

<a href="index.html" onclick="window.open('index.html'); return false">odkaz do novΘho okna javascriptem</a>

Zßpis je to pon∞kud komplikovan∞j╣φ. M∙╛e b²t ale je╣t∞ h∙°:

<a href="http://www.jakpsatweb.cz/" onclick="window.open('http://www.jakpsatweb.cz/','_blank','menubar=no,top=10'); return false">okno bez li╣t</a>

otev°e novΘ okno bez li╣t a nßstroj∙. Okno bude mφt hornφ hranu 10 pixel∙ od hornφho okraje obrazovky, nep∙jde roztßhnout a rolovat. Schvßln∞: okno bez li╣t

Parametry -- li╣ty, rozm∞ry, umφst∞nφ

NovΘmu oknu otev°enΘmu javascriptem se dß p°edepsat spousta v∞cφ (naopak novΘmu oknu od target="_blank" nejde p°edepsat v∙bec nic). P°ehled a dal╣φ p°φklady jsou uvedeny u syntaxe window.open(). Nap°φklad lze vypnout a zapnout panel nßstroj∙ (toolbar), °ßdek adresy (location), stavov² °ßdek (status), menu (menubar). Oknu se m∙╛e povolit rolovßnφ (scrollbars) a zm∞na velikosti (resizable). Okno m∙╛e mφt nastaveny pevnΘ rozm∞ry (width, height) a m∙╛e b²t na obrazovce na p°esnΘ pozici (left, top). Okno se m∙╛e zobrazit p°es celou obrazovku (fullscreen).

Pokud se hodnoty neuvedou, jsou chßpßny negativn∞ (co se neuvede, to se nezobrazφ).

V╛dycky to okno bude mφt titulkov² prou╛ek (v∞t╣inou modr²), ten se nedß vypnout.

P°φklady: 

window.open('banner.html','_blank','width=468,height=60,top=0,left=0')

zobrazφ banner.html v okn∞ velkΘm 468x60 u hornφho levΘho kraje obrazovky

window.open('special.html','_blank','width=500,height=400,location,resizable')

otev°e okno se strßnkou special.htm o velikosti 500x400. Pozice na obrazovce nenφ definovßna. Je vid∞t adresa strßnky. Oknu se dß zv∞t╣it velikost (resizable), ale nelze jφm rolovat (proto╛e chybφ scrollbars).

Dß se to obejφt

Uv∞domte si, ╛e t°eba stisknutφm Ctrl + N si m∙╛e u╛ivatel zapnout tutΘ╛ strßnku v dal╣φm novΘm normßlnφm okn∞, kterΘ je v∞t╣φ, s menu, se zobrazenou adresou atd. (Mimochodem jß to tak d∞lßm skoro v╛dy.) Nikdy si tedy nemyslete, ╛e parametry okna mohou p∙sobit jako n∞jakß p°ekß╛ka. Prost∞ se to dß obejφt.

Varuji p°ed fullscreenem

Hodn∞ amatΘr∙ rßdo otevφrß novΘ okno p°es celou obrazovku. D∞lß se to parametrem fullscreen, nap°:

<a href="http://www.jakpsatweb.cz/" onclick="window.open('http://www.jakpsatweb.cz/','','fullscreen'); return false">Jak psßt web p°es celou obrazovku</a>

To okno se (na Windows) dß shodit pouze Alt + F4. Zkuste si to: Jak psßt web p°es celou obrazovku. Nikdy to nepou╛φvejte, je to prasßrna nejv∞t╣φho kalibru. Co myslφte, ╛e si u╛ivatel myslφ, kdy╛ se mu n∞co takhle otev°e: 

Zp∙soby volßnφ window.open()

Pop-up p°i naΦφtßnφ strßnky

AutomatickΘ vyskoΦenφ novΘho okna p°i naΦφtßnφ strßnky (popup). NovΘ okno vyskoΦφ, i kdy╛ se nestiskne ╛ßdn² odkaz. D∞lß se to t°eba za°azenφm skriptu do toku dokumentu:

<script>
window.open('popup.html','_blank','width=250,height=250')
</script>

Vizte p°φklad a teorii pop-upu. V╣ichni u╛ivatelΘ, co znßm, takovß okna automaticky zavφrajφ my╣φ, je╣t∞ ne╛ se v okn∞ n∞co zobrazφ. Modernφ prohlφ╛eΦe a r∙znΘ doinstalovanΘ nßstroje (nap°. Google toolbar) um∞jφ automatickΘmu otevφrßnφ nov²ch oken zabrßnit.

href="javascript:window.open()"

Umis╗ovat do href zßpis javascript:n∞co je obecn∞ vzato chyba. 

No ale kdybyste to n∞kdy pot°ebovali, funguje to takhle:

<a href="javascript: window.open('http://www.jakpsatweb.cz','','')">nespolehliv² odkaz do novΘho okna</a>

Vyu╛itφ udßlosti onclick

V zßsad∞ se jednß o jedin² p°ijateln² zp∙sob, jak javascriptem + odkazem otevφrat novß okna. Zßpis je:

<a href="adresa.html" onclick="window.open('adresa.html','',''); return false">odkaz</a>

ProΦ je tam to href="adresa.html"? Zdß se toti╛, ╛e je to zbyteΦnΘ. Nenφ. Je to tam kv∙li klient∙m, kte°φ nepodporujφ javascript (zejm. Google robot). 

Pokud je adresa dlouhß, dß se to napsat struΦn∞ji pomocφ vlastnosti this.href, kterß mß hodnotu hrefu odkazu:

<a href="dlouha_adresa.html" onclick="window.open(this.href,'',''); return false">odkaz</a>

ProΦ je tam to return false? Aby odkaz neprokliknul a v p∙vodnφm okn∞ aby z∙stala p∙vodnφ strßnka.

Zavφrßnφ okna odkazem

Okno, kterΘ jsem javascriptem otev°el, m∙╛u i javascriptem zav°φt. Nap°φklad do tΘ strßnky m∙╛u dßt odkaz:

<a href="#cokoliv" onclick="window.close()">zav°φt okno</a>

Ne ka╛dΘ okno jde samo zav°φt. V∞t╣ina oken prohlφ╛eΦe p°ed zav°enφm javascriptem zobrazφ v²stra╛nou hlß╣ku:

"Webovß strßnka, kterou prohlφ╛φte, se pokou╣φ zav°φt okno.
Mß se okno zav°φt?
Ano Ne"

Jde pravd∞podobn∞ o bezpeΦnostnφ opat°enφ prohlφ╛eΦ∙.

ProΦ o tom pφ╣u -- hodn∞ lidφ se sna╛φ ud∞lat strßnku, kterß:

Tak╛e tohle pokud vφm ud∞lat nejde, proto╛e se to p∙vodnφ okno p°i zavφrßnφ zaΦne cukat. A jestli chcete znßt m∙j nßzor, tak si myslφm, ╛e je dob°e, ╛e to nejde.

NovΘ okno v editorech

Pokud se nechcete no°it do HTML a pou╛φvßte n∞jak² wysiwyg editor, v∞t╣inou na otev°enφ novΘho okna staΦφ: 

  1. zvolit vlastnosti odkazu (dialog, kde se nastavuje, kam ten odkaz vede)
  2. hledat n∞co jako "cφlovΘ okno", "cφlov² rßm", "target", target frame", "target window"
  3. a zvolit tam hodnotu "novΘ okno", "new window" nebo "_blank"

Pro a proti nov²m okn∙m

Proti

U╛ivatele to zmate.

Um∞jφ to stejn∞ sami.

Pro

ObΦas je n∞jakß informace dopl≥kovß

V galeriφch, kde se obrßzky naΦφtajφ dlouho, mß novΘ okno smysl. Stejn∞ tak v n∞jak²ch slo╛it∞j╣φch aplikacφch, kde je pot°eba neopustit strßnku (t°eba proto╛e je formulß° zpola vypln∞n²).

Zßv∞r

Tak╛e novΘ okno pou╛φvat pouze v²jimeΦn∞. Kdo z tΘto strßnky nic nepou╛ije, vyhrßl.

 Vizte tΘ╛: Odkazy v HTML, Jak zdokonalit odkazy, Zßkladnφ definice rßm∙, Otev°enφ novΘho okna Javascriptem, Metody objektu window, Pou╛itelnost strßnek

o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek

Pφ╣e Yuh∙, dusan@pc-slany.cz

Hledßnφ:

Jak psßt web: www.jakpsatweb.cz

Pφ╣e Yuh∙: http://dusan.pc-slany.cz, mail: dusan@pc-slany.cz

Poslednφ aktualizace 10.12.2003