RSS: Vše - Programování



Otevírání odkazů do nového okna a norma xHTML 1.0 Strict

01. 11. 2007, 00:21:00,Programování,

Jak jistě všichni víte, HTML element pro tvorbu hypertextového odkazu má parametr target, který nám umožňuje definovat, do jakého okna (rámu) se má cílová stránka zobrazit. Pokud jsme tedy potřebovali otevřít odkaz do nového okna, dlouhá léta jsme si vystačili s jednoduchým

<a href="cil.html" target="_blank">cil</a>

Jednoduché, elegantní a funguje to. Co si ale počít, pokud chceme mít stránku validní podle normy xHTML 1.0 Strict, která parametr target nepřipouští?

Následující myšlenkový sled pochází z velké části z přednášky Josefa Šímy. Zaujal mě natolik, že jsem se rozhodl jej doplnit o vlastní postřehy a podělit se o něj s vámi.

Na pomoc si samozřejmě musíme vzít javascript. První řešení, které asi leckoho napadne a které je i přes svou nevhodnost stále na spoustě míst používané, je prosté

<a href="javascript:window.open('cil.html');">cil</a>

Tento způsob má samozřejmě celou řadu nevýhod. Jednak nutí prohlížeč znát a správně interpretovat virtuální protokol javascript a jednak odkaz nebude fungovat nikom, kdo nemá javascript zapnutý ve svém prohlížeči.

První nevýhodu odstraníme ještě relativně snadno:

<a href="#" onclick="window.open('cil.html');">cil</a>

Stále nás ovšem trápí nefunkčnost odkazu bez zapnutého javasriptu. Nabízí se tedy leší řešení:

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

Vrácení hodnoty false z obsluhy události onclick způsobí, že se nenačte cílová stránka do původního okna, ale pouze do okna nového. V případě, že nemá uživatel aktivovanou podporu javascriptu, bude odkaz fungovat klasickým způsobem.

Zdá se vám, že máme tedy vyhráno? Kdepak! Díky různému blokování vyskakovacích oken se nám může stát, že našemu novému oknu nebude dovoleno se otevřít. V takovém případě bychom samozřejmě uvítali, kdyby se cílová stránka načetla alespoň do okna původního. K tomu, aby nám to tímto způsobem fungovalo, postačí využít návratové hodnoty metody window.open:

<a href="cil.html" onclick="return !window.open('cil.html');">cil</a>

Když se podívám na tento kód, začíná se mi už pomalu líbit. Je tu ale ještě jedna věc, která mi vyloženě vadí - odkazované url je zbytečně na dvou místech, což nemusí být praktické, pokud čas od času toto URL měním. S tím mi pomůže kosmetická úprava, která využije vlastnost href elementu a:

<a href="cil.html" onclick="return !window.open(this.href);">cil</a>

Tohle už je takřka ideální kód, s kterým by se mnoho lidí jistě spokojilo. Já ale nemám rád inline javascript a mnohem raději bych to dotáhl ještě o krok dále a viděl výše uvedený odkaz v tvaru podobném tomuto:

<a href="cil.html" class="popup">cil</a>

Je pak ale možné dosáhnout stejné funkce jako v předchozích případech? Ano. Postačí k tomu jeden externí javascriptový soubor, který se sám postará o navázání správné funkce na událost onclick jednotlivých odkazů, které mají třídu "popup":

function popupOdkazy() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (links[i].className.match("popup")) {
links[i].onclick = function() { return !window.open(this.href); }
}
}
return true;
}
window.onload = popupOdkazy;

Autor: Pavel Šindelka

Komentáře


[1] (Aichi) - 01. 11. 2007, 14:45:17
kdo je tady hnida?
[2] (Orcslayer) - 01. 11. 2007, 15:20:28
Co se týče posledního řádku - jaktože chybí závorky "()"?
[3] (Pavel Šindelka) - 01. 11. 2007, 21:46:32
Aichi ... hnida jsi tady Ty :)

Orcslayer .. ne, nechybí. My v tomto případě nechceme přiřadit do window.onload návratovou hodnotu funkce popupOdkazy (pak by tam skutečně ty závorky byly), ale naopak funkci samotnou.
[4] (pepe) - 11. 11. 2007, 23:07:11
vypada to pekne, sikula ;) .. byt tu znamkovani clanku davam 1
[5] (Pavel Šindelka) - 11. 02. 2008, 10:19:52
Jinak pro vývojáře, kteří používají javascriptovou knihovnu jQuery tu mám tuto variantu funkce:

function popupOdkazy() {
$("a.popup").each(function (i) {
this.onclick = function() { return !window.open(this.href); }
});
return true;
}

window.onload = popupOdkazy;

Komentovat


Tento článek byl uzavřen. Už není možné k němu přidávat komentáře ani hlasovat