Návod se 3 praktickými ukázkami, jak pomocí jQuery najít a graficky odlišit externí odkazy, případně je otevřít v novém okně bez použití atributu target="_blank".
jQuery: Grafické označení externích odkazů a jejich otevření
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.
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.
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.
Zdroj: Profimagazin.cz