Otváranie externých odkazov v novom okne

Fintu ako vytvoriť odkaz tak, aby sa po klinutí naň otvorila stránka v novom okne asi pozná každý. Stačí ku odkazu pridať atribút target s hodnotou _blank a je to. Napríklad:

<a href="http://www.example.com" target="_blank">www.example.com</a>

Problém však je, že tento kód nie je valídny XHTML (strict) kód. Teda ani to tak nie je problém, ale nikto nechce aby mu valídnosť kódu pokazila takáto maličkosť.

Minule som riešil presne toto isté. Požiadavka bola, aby sa externé odkazy otvárali v novom okne. Ja som však nechcel použiť hore uvedené riešenie a tak ma napadol Javascript a začal som gúgliť.

Našiel som viacero riešení a niekoľko veľmi elegantných vďaka knižnici jQuery. Pravda, používať na webe jQuery len kvôli tomuto, nie je najlepší nápad, ale pokiaľ túto knižnicu používate na webe aj inde, tak by bola škoda ju nevyužiť.

Mne osobne sa najviac zapáčilo nasledovné riešenie:

$(document).ready(function(){ 
     $("a[rel*='external']").click(function(){window.open(this.href); return false;});
});

Keď je dokument (web stránka) pripravený na spracovanie, tak daný kód nájde všetky odkazy, ktoré obsahujú atribút rel s hodnotou external (selektor a[rel*='external']) a priradí im funkciu, ktorá daný odkaz otvorí v novom okne. Táto funkcia sa spustí pri kliknutí na odkaz.

Čiže jediné čo treba urobiť, je pridať ku všetkým externým odkazom atribút rel s hodnotou external a hore uvedený kód sa postará o zvyšok. Samozrejme, tým čo majú vypnutý Javascript to fungovať nebude, ale takých užívateľov je minimum a myslím, že v tomto prípade ich môžeme ignorovať.

Príklad odkazu, ktorý sa vďaka nášmu kódu otvorí v novom okne:

<a href="http://www.example.com" rel="external">www.example.com</a>

Samozrejme toto riešenie nemusí vyhovovať každému, ale vďaka jQuery nie je problém ho pozmeniť podľa svojich požiadaviek. Nejaké príklady si môžete pozrieť tu, alebo si ich nájdete cez google.

Pridajte sa do konverzácie

2 komentáre

Zanechať komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *