jQuery: Grafické označení externích odkazů a jejich otevření v novém okně | Profi Magazín - webdesign, ikony, jquery, Textpattern

Stává se pomalu běžnou praxí, že bývají graficky odlišovány odkazy na stránce, které vedou mimo daný web. Podívejme se tedy, jak pomocí jQuery naprosto jednoduše odlišit externí odkazy a navíc je případně po kliknutí otevřít v novém okně bez použití target="_blank" (do krve bojující skupina lidí za neotevírání odkazů do nových oken jistě prominou). Nejprve si ukážeme, jak externímu odkazu přiřadíme class="external", pro kterou již budeme mít definované CSS vlastnosti. Ve druhém příkladu vložíme za externí odkaz obrázek bez použití CSS.

Varianta A: nalezení externích odkazů a přiřazení class="external"

Nejprve si ukažme celý kód:

$(document).ready(function() {
  $('#content a').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).addClass('external');
});

Zobrazit příklad

Teď si to trochu rozeberme. $(document).ready() nám zajistí, že se skript provede až po načtení celého DOMu, což je v podstatě u všech jQuery skriptů naprosto nezbytné, jinak by se skript vůbec nemusel vykonat nebo by se provedl jen na části HTML kódu.

$('#content a') zde představuje CSS selektor, který definuje všechny odkazy elementu a uvnitř #content (například DIVu). Zde si dejte největší pozor, tady se dělají největší chyby, neboť někteří horlivě kopírují zdrojový kód neuvědomujíc si, že zde může být selektor, který ve svém HTML vůbec nemají a skript jim tak nefunguje.

jQuery funkce filter() nám vyhledá všechny elementy vyhovující našemu specifikovanému výrazu.

function() { return this.hostname && this.hostname !== location.hostname; }) nám testuje, zda je odkaz odlišný od domény na níž se odkaz nachází. Tedy testujeme location.hostname (naši doménu) vůči this.hostname (doméně v odkazu), které se nesmí rovnat. A zároveň && pro předejití problémů s případnými falešně pozitivními mailto: odkazy přidáme ještě samotné this.hostname.

Funkce addClass('external') je asi pochopitelná - všem vyhovujícím elementům přidá CSS class external. Zde už je potřeba pouze připravit CSS vlastnosti pro tuto třídu - můžete tedy specifikovat např. pozadí odkazu nebo speciální barvu pouze pro externí odkazy. Mohlo by to tedy vypadat například takto:

.external {
  background: url(/design/external.gif) top right no-repeat;
  padding: 0 15px 0 0;
}

Padding si samozřejmě nastavíte podle šířky ikony plus mezery, kterou chcete mít mezi textem a ikonou. 

Varianta B: vložení obrázku za externí odkaz

Další možností je přidat za (případně před) externí odkaz obrázek. Zde je kompletní skript:

$(document).ready(function() {
  $('#content a').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).after('<img src="/design/external.gif" alt="Odkaz směřuje mimo tento web" />');
});

Zobrazit příklad

Jak vidíte jen jsme vyměnili funkci addClass() za funkci after(), která nám za specifikovaný element vloží XHTML, tedy námi definovaný obrázek. Pokud byste obrázek chtěli vložit před odkaz použili byste funkci before().

Otevření externího odkazu v novém okně

Třesničkou na pomyslném dortu je pak otevření odkazu v novém okně bez použití atributu target="_blank".

$(document).ready(function() {
  $('#content a').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).addClass('external')
  .click(function() {
    window.open(this.href);
    return false;
  });
});

Zobrazit příklad

Pomocí funkce click() se po kliknutí tedy otevře nové okno s adresou externího odkazu window.open(this.href).