Il y a fort fort longtemps (dans une galaxie lointaine...), il était facile d'ouvrir un liens dans une nouvelle page. Le HTML offrait un attribut plutôt sympathique.
Pourtant ce dernier a subit une fin atroce: il a été déprécié par le W3C.(paix à son âme.)
Nous n'allons pas polémiquer sur le fait que le W3C ait eu raison ou tords de supprimer cette option qui était invasive sur le mode de navigation de l'utilisateur.
Pourtant, je trouve cette possibilité intéressante, par exemple pour les liens externes à son site. Mais tout n'est pas encore perdu, notre salut est assuré par le javascript.
Pour autant il ne faut pas le faire n'importe comment.
1.Bien intégrer le javascript.
2.Petite règle de conduite. indiquer à l'utilisateur que l'on ouvre une nouvelle fenêtre, avec la balise title par exemple (c'est toujours sympa à faire).
Donc on a dit plus de ça:
<a href="http://www.stoitg.com" title="stoitoi :new window" target="_blank">target blank</a>
Malheureusement on voit trop souvent des truc du genre:
<a href="javascript: window.open('http://www.stoitg.com');">ne marche meme pas sous ff</a>
<a href="#" onclick="window.open('http://www.stoitg.com');">lien javascript</a>
<a href="javascript:" onclick="window.open('http://www.stoitg.com');">lien javascript 2 </a>
Niveau syntaxe ce qui suit est mieux mais niveau accessibilité c'est le néant (javascript désactivé plus de lien!)
<a href="javascript: var whoCares=window.open('http://www.stoitg.com');" title="www.stoitg.com :new window">bad accessibilite</a>
C'est bien beau mais alors on fait comment?
<a href="http://www.stoitg.com" title="www.stoitg.com :new window" onclick="window.open('http://www.stoitg.com');return false;">C'est pas mal ca :)</a>
bon on a déjà fait une ouverture de pop up accessible. Mais comme on sépare la présentation de la sémantique avec les feuilles de style (css), pourquoi ne pas le faire avec les
évènements et faire disparaître ce vilain onclick ou le js dans le href.
le js dans un fichier séparé 'script.js'
function ext_link() {
/*Parametres*/
var chosenClass = 'lien_ext';
var titleAdd = ': new window';
/*WARNING -- DONT TOUCH*/
var liens = document.getElementsByTagName('a');
for (var i = 0 ; i < liens.length ; ++i) {
if (liens[i].className == chosenClass) {
liens[i].title += titleAdd;
liens[i].onclick = function() {
window.open(this.href); // On ouvre une nouvelle page ayant pour URL le href du lien
return false; // On inhibe le lien réel.
};
}
}
}
window.onload = function() {
ext_link();
}Dans le header de votre page HTML
<script type="text/javascript" src="script.js"></script>
Pour faire un lien extérieur
<a href="http://www.stoitg.com" title="stoitg.com" class="lien_ext">c'est pas beau ca</a>
On pourra même reprendre la classe dans le css pour les différencier visuellement