Otváranie odkazov v novom okne podrobne
Jozef Benko / 06. 03. 2009, 16:31
Ak potrebujete otvoriť odkaz v novom okne prehliadača, pravdepodobne narazíte na niekoľko problémov. Na prvý pohľad veľmi jednoduchá záležitosť môže pre začínajúceho web dizajnéra predstavovať celkom zložitý problém. V článku uvediem základné techniky, ale i jednu veľmi elegantnú metódu.
V časoch pred príchodom XHTML sa táto problematika moc nerozoberala. Do odkazu sa jednoducho pridal target="_blank" a nové okno bolo na svete. Diskusiu priniesol až sporný krok W3C konzorcia, keď normatívne zakázalo používanie atribútu target v XHTML dokumentoch (pre zaujímavosť uvediem, že v XHTML 1.1 ho konzorcium opäť povolilo). Otváranie okien sa dnes rieši viacerými spôsobmi. Ak chceme používať XHTML a zároveň sa nevzdať atribútu target, jednoducho musíme porušiť XHTML špecifikáciu. Druhou možnosťou je zostať pri HTML, ktoré atribút target nezakazuje. Nakoniec však ešte existujú dve možnosti, ako pomocou JavaScriptu otvoriť nové okno a zároveň neporušiť validitu XHTML dokumentu.
Udalosť „onclick“
Všeobecne známy a veľmi jednoduchý spôsob ponúka udalosť onclick. Do odkazu stačí vložiť krátky JavaScript, ktorý pomocou metódy window.open() otvorí nové okno:
Kód je krátky a jednoduchý, no pre lepšie pochopenie ho popíšem detailne a do teoretických podrobností. Metóde window.open() je predaný jeden argument – URL adresa odkazu. K nej sa dostaneme pomocou vlastnosti this.href. V kóde sa navyše nachádza kľúčové slovo return a výkričník pred metódou window.open(). Totiž, táto metóda na základe toho, či bolo otvorenie okna úspešné alebo nie, vráti buď objekt otvoreného okna, alebo v prípade neúspechu hodnotu false. V prípade, že sa okno otvorí, udalosť onclick skončí negáciou objektu otvoreného okna, čiže hodnotou false. To zabezpečí, aby sa odkaz neotvoril aj v pôvodom okne (schválne, skúste z kódu zmazať výkričník). Ak sa z nejakého dôvodu nepodarí otvoriť nové okno, vďaka negácii bude výsledkom hodnota true a odkaz sa otvorí aspoň v pôvodnom okne.
Tento spôsob má hneď dve nevýhody. Za prvé, metóda window.open() môže byť v priehliadači blokovaná, pretože sa často používa na otváranie otravnej „pop-up“ reklamy. Za druhé, pridávať do odkazu JavaScript zakaždým, pokiaľ ho chceme otvoriť v novom okne môže byť otravné. Obe nevýhody rieši nasledujúci elegantný spôsob.
Prístup k vlastnosti „target“ pomocou DOMu
Atribút target je síce v XHTML špecifikácii zakázaný, no stále sa nachádza v štruktúre DOMu. Takže v skutočnosti mu môžeme nastaviť hodnotu aj bez zápisu v HTML – pomocou JavaScriptu. V prvom rade si musíme nejakým spôsobom označiť odkazy, ktorým budeme nastavovať vlastnosť target. Na tento účel sa priamo ponúka atribút rel. Nie je zložité prejsť JavaScriptom celý dokument a označeným odkazom nastaviť vlastnosť target:
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.getAttribute("href")
&& link.getAttribute("rel") == "external") {
link.target = "_blank";
}
}
}
if (window.attachEvent) {
window.attachEvent("onload", addTarget);
} else if (window.addEventListener) {
window.addEventListener("load", addTarget, false);
} else {
document.addEventListener("load", addTarget, false);
}
Odkazy, ktoré sa otvoria v novom okne, vytvoríme jednoducho:
<a href="..." rel="external">Odkaz</a>
Na zamyslenie: otvárať, či neotvárať okná?
Skôr ako použijete akúkoľvek vyššie spomenutú metódu, je dobré položiť si otázku, kto má vôbec rozhodovať o tom, či sa odkaz otvorí v pôvodnom alebo v novom okne. Ak to urobí tvorca webovej stránky, môže tak obmedziť komfort návštevníka. Webové prehliadače dnes ponúkajú funkcie, vďaka ktorým má sám používateľ možnosť ovplyvniť, kam sa otvorí odkazovaný dokument (v pôvodnom okne, v novom okne, alebo na novej karte). Je dôležité vždy zvážiť, či je to nevyhnutné. Vo väčšine prípadov je to skôr na škodu, preto buďte s otváraním okien opatrní.