Articles > Programmation web >
Des popups propres
Les popups, c'est pas si mal. Dans certains cas cela peut-être utile. Par exemple, pour qu'un petit lexique s'ouvre dans une nouvelle fenêtre lorsqu'on clique sur un mot compliqué.
Cependant, de nombreux internautes désactivent le javascript. Moi-même j'utilise une petite extension de mon navigateur qui restreint le javascript à certains sites. Du coup, il convient de ne pas rendre la consultation du site dépendante du javascript. De même, il est préférable de séparer les scripts du contenu HTML, pour des raisons de maintenabilité.
L'idée est donc de remplacer ce qui suit:
<a href="javascript:window.open('Titre','Url','options')">Lien</a>
Par quelque chose de plus propre.
J'ai donc mis au point le petit script que voilà:
window.onload = function(){
// On lance la fonction qui va permettre de faire des popups propres
replace_popup();
}
// Cette fonction ajoute le comportement "ouvrir popup" à tous les liens dont la class est "popup"
function replace_popup(){
var liens = getElementsByClassName("popup");
for(i = 0; i < liens.length; i++)
{
liens[i].onclick = open_popup;
}
}
// Fonction appelée par les liens popup
function open_popup(){
// On ouvre la popup
if(window.open(this.href,'','height=450, width=550, left=100, top=0, resizable=1'))
// On empeche le navigateur d'ouvrir le lien dans la page courante (puisqu'il est déjà ouvert dans la popup !)
return false;
}
// Fonction qui renvoie tous les élements d'une classe
function getElementsByClassName( name )
{
var arr = new Array();
var elems = document.getElementsByTagName("*");
for(var i=0; i<elems.length; ++i)
{
var elem = elems[i];
if ( elem.className == name )
arr[arr.length] = elem;
}
return arr;
}
Le mieux étant de placer ce script dans un fichier .js et de le lier à la page HTML de cette facon:
<script type="text/javascript" src="scripts.js"></script>
Du coup, pour faire un lien "popup", il suffit de faire:
<a href="url" class="popup">Lien</a>
Ainsi, si l'internaute n'a pas le javascript, le lien s'ouvrira de facon classique. On peut aussi ajouter la propriété target="_blank" mais alors la page ne sera plus valide xHTML 1.0 Strict...
Dernière édition le Jeudi, 08 Decembre 2005.
