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
<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
NovΘ okno lze otev°φt s vyu╛itφm:
Target znamenß anglicky "cφl". Atribut target u odkazu znamenß cφlovΘ okno nebo cφlov² rßm.
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.
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"
?
target="_blank"
otev°e
v╛dycky novΘ okno,target="cokoliv"
novΘ okno
otev°e jenom poprvΘ. Dßl u╛ posφlß odkazy do toho okna (dokud to okno
u╛ivatel nezav°e, pak otevφrß zase novΘ).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Θ).
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.
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∞.
Target se pou╛φvß na dv∞ v∞ci:
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.
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
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).
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.
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:
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.
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>
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.
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.
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Φφ:
U╛ivatele to zmate.
Um∞jφ to stejn∞ sami.
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²).
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