Jquery e Target _blank? la scelta al visitatore


Usare il target _blank in un link farà aprire il collegamento obbligatoriamente in una nuova pagina, questo tipo di target è spesso usato nei blog e siti per fare in modo che il visitatore non esca dalla pagina web.

Questa può sembrare una soluzione perfetta e universale, in realtà non è così, il target _blank è un elemento deprecato e potrebbe anche influire negativamente sul SEO (Search engine optimization) della pagina, inoltre potrebbe essere scomodo per il visitatore essere obbligato ad aprire decine di finestre o tabelle browser, quindi come fare?

La soluzione migliore dovrebbe essere quella di lasciare al visitatore la scelta, per farlo puoi usare la piccola libreria JavaScript Link target preference che tramite un checkbox fornisce la possibilità di scegliere se aprire i link in nuove tabelle oppure no.

Come usarla

Usare questo script nelle proprie pagine è molto semplice per prima cosa copiamo il codice sorgente qui sotto e incolliamolo in un file di testo con estensione .js e inseriamo questo in una directory del nostro sito, per esempio in una cartella di nome

<!--
/*
	Link Target Preferences v.1.1
	http://www.noscope.com/journal/2004/10/link-target-preferences
*/
 
// INIZIO Configurazione.
	// I seguenti url sono considerati link interni al sito e quindi sarannno ignorati
	// Quindi inserisci per ogni var un url che non vuoi venga aperto in un altra finesta.
	var url_1 = "http://fmdesignblog.com";
	var url_2 = "http://www.fmdesignblog.com";
 
	// Scegli true o flase per scegliere come in che posizione deve essere il bottone ai nuovi visitatori
	// il valore true apre i link in _blank, il valore false li apre in _top.
	var open_blank_default = false;
 
	// Website title - used only for cookie name to prevent cookie conflicts with other sites using this
	// No spaces, no special characters, just a unique name
	var site_title = "example";
// FINE Configurazione.
 
// Cookie Functions
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name) {
	createCookie(name,"",-1);
}
// Checkbox Loader
function loadLinkPrefs () {
	if (readCookie(site_title+"_linkprefs_cookie")) {
		initVal = readCookie(site_title+"_linkprefs_cookie");	// Load cookied preference
	} else {
		createCookie(site_title+"_linkprefs_cookie", true, 20000)
		initVal = open_blank_default;	// If no cookie is set
	}
	openBlank = initVal;
	setCheckbox(eval(initVal))
}
// Set Checkbox State
function setCheckbox(state) {
	openBlank = state;
	document.getElementById('linkprefs').checked = state;
	setTargets();
	createCookie(site_title+"_linkprefs_cookie", state, 20000)
}
// Configure Link Targets
function setTargets() {
	var link, l = 0;
	if (openBlank == true) {
		while (link = document.links[l++]) {
			// Open in _blank, except all links starting with...
			if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_blank'; 
		}
	} else {
		while (link = document.links[l++]) {
			// Open in _top, except all links starting with...
			if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_top'; 
		}
	}
}
// Event Listener, by Scott Andrew
function addEvent(obj, evType, fn) {
	if (obj.addEventListener) {
		obj.addEventListener(evType, fn, true);
		return true;
	} else if (obj.attachEvent) {
		var r = obj.attachEvent('on'+evType, fn);
		return r;
	} else {
		return false;
	}
}
//-->

Adesso per attivare lo script dobbiamo incollare il codice qui sotto tra i tag head della pagina web

<script src="http://www.nomesito.com/js/linkprefs.js" type="text/javascript"></script>

L’ultimo passaggio da eseguire sarà inserire il checkbox di scelta dove preferisci all’interno dei una pagina web.

   <input name="linkprefs" id="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" value="linkprefs" type="checkbox" />
   <label for="linkprefs" title="Selezionando questa opzione tutti i link si apriranno in una nuova finestra">Apri i link in una nuova finestra</label>
   <script language="JavaScript" type="text/javascript">addEvent(window, 'load', loadLinkPrefs);</script>
Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

9 Risposte per Jquery e Target _blank? la scelta al visitatore

  1. Gabriele Malaspina 29 novembre 2010 at 20:41 | Permalink | Reply

    Molto molto utile!
    Effettivamente è una buona soluzione.
    Penso che appena avrò un pò di tempo lo proverò di persona ;)

    • Francesco Masetti 3 dicembre 2010 at 10:39 | Permalink | Reply

      Ho visto che l’ hai aggiunto a Succodesign, ;)

      • Gabriele Malaspina 8 dicembre 2010 at 23:12 | Permalink | Reply

        Si si utilissimo :) grazie ancora
        Una curiosità, usi qualche plugin per la formattazione dei commenti,per il reply e l’indentazione delle risposte?

      • Gabriele Malaspina 9 dicembre 2010 at 00:07 | Permalink | Reply

        Comunque per il target _blank forse ti converrebbe configurare i campi:

        var url_1 = “http://bestwebgallery.com”;
        var url_2 = “http://www.bestwebgallery.com”;

        Per evitare che apra anche i link interni in una nuova scheda :P

  2. Simone Forti 3 dicembre 2010 at 19:38 | Permalink | Reply

    Ignoravo il fatto target=”_blank” fosse un tag deprecato, e quindi che può influire sul Seo.
    Al tempo stesso trovo l’alternativa un pò macchinosa, non sò quanto l’utente medio-basso possa accorgersi del box di scelta.
    L’utente medio-alto invece si gestisce autonomamente aprendo nuove schede o finestre a seconda dell’esigenza.

    Sarebbe interessante utilizzare il jQuery come alternativa al “_blank” in collegamente stabiliti (non di tutti) sostituendo di fatto il _blank ma senza scelta dell’utente. Sai se è possibile?

    • Francesco Masetti 4 dicembre 2010 at 15:36 | Permalink | Reply

      il metodo non mi sembra particolarmente macchinoso è più o meno simile a tutti gli altri plugin jquery.

      Per quanto riguarda l’utilità dipende molto dalla posizione in cui inserisci il box e magari da come lo proponi, si possono sempre inserire css per renderlo più visibile.

      L’ idea che proponi è interessante, credo che si possa fare, adesso mi informo.

Lascia un commento

Trackbacks