X
    Categories: Javascript

Javascript: evidenziare i link esterni

Ecco uno script semplice e utile per segnalare ai visitatori di un sito se un link è esterno o interno al sito stesso.
Lo script infatti aggiunge automaticamente questo simbolo (tasto destro per scaricare questa immagine).
Altra funzionalità è quella che permette di aprire sempre in ‘_blank’ i link esterni senza dover aggiungere il target nel codice.

Il primo passo è quello di creare un file javascript chiamato linkEnhancer.js

[html]/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jeroen Haan | http://www.haan.net */
/* ———————————————–
Link Enhancer – v.1.1
(c) 2007 www.haan.net
contact: jeroen@haan.net
You may use this script but please leave the credits on top intact.
Please inform us of any improvements made.
When useful we will add your credits.
———————————————— */

// Give the outbound links a blank target and their own style
// and optional the inbound too or vise versa
// It will leave the mailto alone and skip anchor tags without the href attribute

function enhanceLinks() {
var links = document.getElementsByTagName(“a”);
var thisDomain = document.domain.split(‘www.’);
var thisDomain = (thisDomain[1]) ? thisDomain[1] : document.domain ;
for (var i = 0; i < links.length; i++) {
if(links[i].href.indexOf(thisDomain) == -1 && links[i].href != ”) {
links[i].target = ‘_blank’;
links[i].className = ‘link_ext’;
}
// or else do this too if you like
// else
// {
// links[i].target = ‘_self’;
// links[i].className = ‘link_int’;
// }
}
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(function() {
enhanceLinks();
});[/html]

Poi di aggiungere al foglio di stile del proprio sito questa istruzione

[html].link_ext {
height: 20px;
background: url(link_ext.gif) no-repeat right 4px;
padding: 0 13px 0 0;
}
[/html]

Tra i tag head infine aggiungiamo il riferimento allo script

[html]<script type=”text/javascript” src=”linkEnhancer.js”></script>[/html]

Sergio Gandrus: Da febbraio 2024 lavoro come CTO presso Deva Connection Il mio stack è PHP/MySQL/Git/Docker. Lavoro con Agile (Scrum) e utilizzo principalmente AWS come cloud provider. Sono papà e marito. Nel tempo libero mi piace leggere, il buon vino e viaggiare.