<meta http-equiv='pics-label' content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://interval.cz" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://interval.cz" r (n 0 s 0 v 0 l 0))' />
<h2>OhleduplnΘ otevφrßnφ nov²ch oken s JavaScriptem</h2>
<p id='prepend'>V n∞kter²ch p°φpadech p°i otevφrßnφ odkazu do novΘho okna je pro u₧ivatele pohodln∞jÜφ, aby nevyskakovala dalÜφ okna, pokud mu ji₧ jedno "naÜe okno" vyskoΦilo - to je jednoduchΘ, nicmΘn∞ takovΘ okno se m∙₧e skr²t v pozadφ hlavnφho okna a u₧ivatel pak nezaregistruje, ₧e se jeho obsah zm∞nil. V Φlßnku si nejen ukß₧eme, jak namφsto otev°enφ dalÜφho okna jen p°enΘst ji₧ otev°enΘ okno do pop°edφ, ale takΘ jak se s₧φt s v souΦasnosti hojn∞ vyu₧φvan²mi blokßtory vyskakovacφch oken.</p>
<p>Tento Φlßnek voln∞ navazuje na na p°edchozφ Φlßnky o chyt°ejÜφm a ohledupln∞jÜφm otvφrßnφ nov²ch oken a reaguje i na zm∞ny, kterΘ p°inesl Service Pack 2 pro Windows XP a masovΘ rozÜφ°enφ r∙zn²ch toolbar∙ umo₧≥ujφcφch automatickΘ blokovßnφ vyskakovacφch oken.</p>
<p>AΦkoli si leckdo °ekne, ₧e nastavit odkazu atribut <code>target</code> a do dokumentu v otevφranΘm okn∞ nastavit na udßlost <code>onload</code> vykonßnφ metody <code>focus()</code> je trivißlnφ (a mß sv²m zp∙sobem pravdu), v naÜφ ukßzce vy°eÜφme vφce problΘm∙ najednou:</p>
<ul>
<li>Atribut <code>target</code> ve vyÜÜφch verzφch XHTML nenφ podporovßn a navφc jeho pou₧itφ pro otev°enφ novΘho okna kompletn∞ znemo₧nφ u₧ivateli p°ejφt na odkaz v p°φpad∞, ₧e mß aktivnφ blokovßnφ otevφrßnφ nov²ch oken. Jako nßhradu proto pou₧ijeme nastavenφ vlastnosti <em>target</em> v DOM pomocφ klientskΘho skriptovßnφ, a to pouze tehdy, pokud je toto opravdu pot°eba.</li>
<li>Abychom mohli ovlßdat otvφranΘ okno, musφme jej otev°φt skriptem prost°ednictvφm <code>window.open()</code> - to je vpo°ßdku, musφme ovÜem zajistit i funkΦnost <a href='http://interval.cz/clanek.asp?article=1593' title='PeprnφΦek, Vφt: Jak na ohledupln² JavaScript?'>bez podpory skriptovßnφ</a> a v p°φpad∞ skriptovßnφ oÜet°it stav, kdy mß klient "vyskakovßnφ" oken blokovßno.</li>
<li>Pokud jsme okno otev°eli pomocφ <code>window.open()</code> a zachovali si v prom∞nnΘ jeho handler, m∙₧eme pak uplatnit metodu <code>focus()</code> - je vÜak t°eba se ujistit, ₧e okno nebylo zav°eno dotazem na vlastnost <code>window.closed</code>.</li>
<li>Ne v₧dy mßme mo₧nost zasahovat do dokumentu otvφranΘho do novΘho okna, p°idßnφ <samp>onload="window.focus();"</samp> nenφ v₧dy mo₧nΘ a Φasto ani vhodnΘ, pokud je dokument n∞jak interaktivnφ.</li>
<li>V n∞kter²ch aplikacφch se nßm u₧ivatel v novΘm okn∞ p°ihlaÜuje do n∞jakΘ dopl≥kovΘ aplikace - m∙₧e jφt nap°φklad o r∙znΘ nastavovßnφ slu₧eb, administraΦnφ rozhranφ a podobn∞. Pokud budeme schopnφ ji₧ otev°enΘ okno s p°ihlßÜen²m u₧ivatelem pouze p°enΘst do pop°edφ, u₧ivatel o svΘ p°ihlßÜenφ nep°ijde. Pokud bychom na dalÜφ kliknutφ u₧ivatele v hlavnφm okn∞ otev°eli novΘ okno, u₧ivatel by o p°ihlßÜenφ p°iÜel (pokud nepou₧φvßme cookies), co₧ je nepohodlnΘ.</li>
</ul>
<p>V²sledkem je krßtk² skript, kter² umφs¥ujeme do hlavnφ strßnky. Strßnka (dokument) v otevφranΘm okn∞ nßs v∙bec nemusφ zajφmat, m∙₧e b²t i z ·pln∞ cizφho serveru a p°esto se korektn∞ p°enese do pop°edφ, jakmile klikneme na odkaz v mate°skΘ strßnce. ProhlΘdn∞te si <a href='podklady/ruzicka/910/FocusWindow.html'>ukßzku</a> (<a href='podklady/ruzicka/910/focuswindow.zip'>zdrojov² k≤d</a>) odkazujφcφ takΘ na zadßnφ novΘho p°φsp∞vku do diskuse naÜeho <a href='http://interforum.interval.cz'>Interf≤ra</a> a na editaci profilu. VyzkouÜejte p°itom chovßnφ, kdy₧ je novΘ okno otev°eno a je v pozadφ, kdy novΘ okno zav°ete a kdy hlavnφ strßnku ukßzky obnovφte.</p>
<p>Ukßzky do f≤ra a do knihkupectvφ jsou voleny zßm∞rn∞, proto₧e zde se ukß₧e, ₧e u₧ivatel p°i vhodn∞ navr₧enΘ aplikaci nep°ijde o p°ihlßÜenφ nebo o obsah koÜφku. Pozorujte takΘ chovßnφ p°i aktivnφm blokovßnφ vyskakovacφch oken - nap°φklad v Microsoft Internet Exploreru na Windows XP sice problikne ikonka blokovanΘho okna, avÜak mφsto nehezkΘho chybovΘho hlßÜenφ o zablokovanΘm novΘm okn∞ se odkazovanß strßnka zobrazφ v hlavnφm okn∞.</p>
<p>Nejprve si uka₧me odkaz pro otev°enφ "chytrΘho" novΘho okna:</p>
<p>NovΘ okno je otvφrßno funkcφ <code>OpenMyWin()</code>. Funkce vracφ hodnotu "true", pokud se novΘ okno poda°ilo otev°φt nebo je ji₧ otev°enΘ okno ·sp∞Ün∞ "ovlßdßno". Negovanou hodnotu nechßvßme klφΦov²m slovem <code>return</code> probublat a₧ na ·rove≥ odkazu - pokud se tedy novΘ okno nepoda°φ otev°φt (klient mß nap°φklad blokovanΘ otvφrßnφ nov²ch oken), odkaz zafunguje klasick²m zp∙sobem, tak₧e nßÜ dopln∞n² skript nezp∙sobφ v naÜem webu <a href='http://interval.cz/clanek.asp?article=1248' title='Snφ₧ek, Martin: Odstra≥te bariΘry svΘho webu - modernφ technologie'>bariΘru</a>.</p>
<p>P°φklad strßnky s funkcφ, kterß jen zamezφ zav°enφ okna a upozornφ u₧ivatele (₧ßdnΘ p°idanΘ testovßnφ, zda zobrazit Φi nezobrazit varovßnφ, zde nenφ):</p>
<div class='sample'>
var myTWin = window.myTWin;
<br />
<br />function OpenMyWin(link,winName)
<br />{
<br /> var retValue=true;
<br /> if (myTWin!=null && !myTWin.closed)
<br /> {
<br /> myTWin.focus();
<br /> myTWin.location.href=link.href;
<br /> }
<br /> else
<br /> {
<br /> myTWin=window.open(link.href,winName);
<br /> if (myTWin==null || typeof(myTWin)=="undefined")
<br /> retValue=false;
<br /> else
<br /> {
<br /> link.target=winName;
<br /> myTWin.focus();
<br /> }
<br /> }
<br /> return retValue;
<br />}
</div>
<p>Ve skriptu si deklarujeme prom∞nnou <code>myTWin</code> - v tΘ budeme dr₧et objekt otev°enΘho okna po tom, co novΘ okno otev°eme.</p>
<p>Ve funkci <code>OpenMyWin()</code>si p°ipravφme nßvratovou hodnotu - p°edpoklßdßme, ₧e se vÜe zda°φ, inicilizujeme ji tedy s hodnou <code>true.</code> Dßle otestujeme, zda prom∞nnß <code>myTWin</code>, odkazujφcφ na objekt okna, nenφ "null". Pokud nenφ (okno ji₧ d°φve bylo otev°eno), otestujeme, jestli okno nebylo mezitφm zav°eno - mß vlastnost <a href='http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/closed.asp'>closed</a>. Pokud je okno otev°eno, je k dispozici, pak ho p°esuneme do pop°edφ metodou <code>focus()</code> a jako novou URL nastavφme <a href='http://interval.cz/clanek.asp?article=187' title='Ponkrßc, Miloslav: JavaScript - object Location'>location.href</a> okna na "href" p°edanΘho odkazu "link".</p>
<p>Pokud okno nenφ otev°eno (nebylo otev°eno nebo bylo ji₧ zav°eno), pak prost∞ otev°eme novΘ okno metodou <code>window.open()</code>. V²sledek otev°enφ je p°edßn do prom∞nnΘ <code>myTWin</code> - otestujeme, zda nenφ <code>null</code> nebo odkaz na objekt nenφ typu <code>undefined</code>. Pokud je odkaz <code>null</code> nebo <code> undefined</code>, je z°ejmΘ, ₧e se novΘ okno nezda°ilo otev°φt - klient mß pravd∞pdobn∞ aktivnφ blokßtor vyskakovacφch oken (jako nap°φklad Google/Yahoo toolbar, rozÜφ°enφ MSIE6 ve Windows XP SP2 nebo zßkaz otvφrßnφ nov²ch oken v prohlφ₧eΦφch FireFox, Opera a dalÜφch). V tomto p°φpad∞ s nov²m oknem nelze pracovat, pouze nastavφme nßvratovou hodnotu na <code>false</code>.</p>
<p>Pokud je odkaz na objekt okna korektnφ, m∙₧eme s oknem pracovat. Pro jistotu m∙₧eme nastavit ji₧ zmi≥ovan² <code>target</code>, pou₧ijeme stejnou hodnotu jako pro nßzev okna. Dßle p°eneseme okno do pop°edφ metodou <code>focus()</code>. Toto p°enesenφ je d∙le₧itΘ - m∙₧e se toti₧ stßt, ₧e mate°skΘ okno n∞kdo obnovφ nebo v n∞m p°ejde na jinou strßnku a tφm ztratφ obsah prom∞nnΘ <code>myTWin</code>. Okno s nßzvem "_MyWin" m∙₧e ale b²t stßle otev°enΘ na pozadφ, tak₧e odkaz by se zobrazil v n∞m a u₧ivatel majφcφ hlavnφ okno v pop°edφ by toto nemusel zaregistrovat.</p>
<p>Jako nßvratovou hodnotu funkce tedy nakonec p°edßme hodnotu udßvajφcφ, zda se novΘ okno zda°ilo otev°φt. Tato nßvratovß hodnota, jak ji₧ bylo uvedeno, slou₧φ k potlaΦenφ nebo naopak provedenφ p∙vodnφ funkce odkazu. M∙₧eme si tak b²t jisti, ₧e se klient na strßnku odkazovanou do novΘho okna dostane alternativn∞ v tΘm₧e okn∞, pokud mß vyskakovacφ okna blokovanß.</p>
<p>JeÜt∞ d∙kladn∞jÜφ °eÜenφ by p°edpoklßdalo zamezit ztrßt∞ obsahu <code>myTWin</code> - to by bylo mo₧nΘ umφst∞nφm skriptu do nad°φzenΘho rßmce (s ohledem na p°φstupnost velmi nevhodnΘ), nebo do n∞jakΘho t°etφho okna, kterΘ by na prochßzenφ strßnek v hlavnφm okn∞ nebylo zßvislΘ.</p>
<p>V Φßsti k≤du funkce, kde zjistφme, ₧e je okno otev°enΘ, a nastavujeme novou adresu okna, by bylo mo₧nΘ otestovat, zda se aktußlnφ adresa okna rovnß tΘ, kterou chceme nastavit. Pokud by adresy byly rovny, nastavenφ <code>location.href</code> bychom neprovedli - pouze bychom p°enesli okno do pop°edφ. Volba postupu zßvisφ na aplikaci - v n∞kter²ch aplikacφch je toto "nenastavenφ adresy" ne₧ßdoucφ (u₧ivatel mohl v onom okn∞ nejmΘn∞ jednou odeslat n∞jak² formulß° metodou POST - adresa je tedy stejnß, ale obsah strßnky ne), v jin²ch aplikacφch je velmi vhodnΘ, proto₧e tak u₧ivateli nap°φklad nezmizφ obsah rozepsanΘho p°φsp∞vku ve formulß°i. Naopak do otvφranΘho okna m∙₧eme doplnit <a href='http://interval.cz/clanek.asp?article=2958' title='R∙₧iΦka, Pavel: Upozorn∞nφ p°ed zav°enφm strßnky v MSIE JavaScriptem'>upozorn∞nφ p°ed zav°enφm okna</a>.</p>
<p>Jak vidφte, skript neobsahuje ₧ßdnΘ konfigurovatelnΘ hodnoty - tak, jak le₧φ a b∞₧φ, jej ihned m∙₧ete zaintegrovat do libovolnΘ aplikace a odkaz∙ v nφ pou₧it²ch, jen si je pot°eba u ka₧dΘho odkazu promyslet nßzev otvφranΘho okna. Odkazy se stejn²m nßzvem okna budou otvφrßny do tΘho₧ okna.</p>
<p>Na zßv∞r si zapamatujme, ₧e ohleduplnΘ chovßnφ novΘho okna m∙₧eme dnes zajistit pouze klientsk²m skriptem - nepou₧φvejme proto k otvφrßnφ novΘho okna v ₧ßdnΘm p°φpad∞ atribut <code>target</code>, a to ani tehdy, pokud Doctype naÜeho dokumentu tento atribut podporuje.</p>
<p><span class='note-redactor'>Pozn. red.: Tento Φlßnek vyÜel poprvΘ 23. 7. 2004. P∙vodnφ verze <a href='podklady/ruzicka/910/akt_910_clanek_20040723.zip'>Φlßnku</a> a k n∞mu vedenΘ <a href='podklady/ruzicka/910/akt_910_diskuse_20040723.zip'>diskuse</a> jsou vßm k dispozici v ZIP archivech.</span></p>
<div id='article-about-author'>(odborn² redaktor magazφnu Interval.cz)</div>
</div>
<div class='refer'><h3><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/serial.asp?serial=81' title='p°ehled Φlßnk∙ vΦetn∞ anotacφ'>Pop-up okna velebenß a proklφnanß</a></h3><p>Vyskakovacφ okna jsou jednφm z nejsporn∞jÜφch prvk∙ webdesignu v∙bec. I v naÜich Φlßncφch m∙₧ete pozorovat, jak se m∞nily zp∙soby prßce s popupy a nßzory na n∞. Tato sΘrie Φlßnk∙ ji₧ byla uzav°ena, aΦkoli dalÜφ pokraΦovßnφ nelze vylouΦit.</p><ul><li><strong>OhleduplnΘ otevφrßnφ nov²ch oken s JavaScriptem</strong> (prßv∞ Φtete)</li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2307'>Popup okno jeÜt∞ trochu jinak III</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2282'>Popup okno jeÜt∞ trochu jinak II</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1915'>Popup okno jeÜt∞ trochu jinak</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1858'>AutomatickΘ spouÜt∞nφ ICQ2Go!</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=996'>Jak zv²Üit IQ pop-up okna podruhΘ</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=958'>Jak zv²Üit IQ pop-up okna</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=540'>Reklama ve vyskakovacφm okn∞ trochu jinak</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=90'>TanΦφcφ okna</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=21'>NovΘ okno a jeho parametry</a></li></ul></div>
