Script élégant de contournement de frame sans jQuery

Je vous avais proposé un script pour gérer les frames en deux temps par l’ajout de l’attribut target= »_top » à tous vos liens si une frame était détectée.

Un défaut majeur de ce script était l’obligation d’utiliser jQuery et je travaillai (ok un peu et de loin) à une version « autonome ».

C’était sans compter sur Xorax qui, jeudi dernier, est venu proposer un script autonome dans ce commentaire du billet cité plus haut.

Voici donc le script proposé :

if (top != self) {
var i, a = document.getElementsByTagName('a');
for(i=0;i < a.length;i++) a[i].target='_top';
 }

Son seul défaut (si on peut parler de défaut) est qu'il doit être placé en bas de page, on va donc essayer de remédier à ça.

Si vous n'utilisez pas de librairie javascript pour gérer vos évènements, vous pouvez utiliser la fonction addEvent de Dean Edwards (merci Barbablog) :

/* ========= addEvent: simplified event attachment ========= */
 	function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
	elm.addEventListener(evType, fn, useCapture);
	return true;
	}
	else if (elm.attachEvent) {
	var r = elm.attachEvent('on' + evType, fn);
	return r;
	}
	else {
	elm['on' + evType] = fn;
	}
	}
 /* ========= ElegantFrameKiller =========*/
	function ElegantFrameKiller() {
	if (top != self) {
 var i, a = document.getElementsByTagName('a');
 for(i=0;i < a.length;i++) a[i].target='_top';
 }
 	}
 /* ========= Lance la fonction ElegantFrameKiller au chargement de la page =========*/
 addEvent(window,’load’,ElegantFrameKiller);

Soit vos copiez l'ensemble dans un fichier que vous enregistrez au format .js et que vous liez à votre/vos pages dans votre header (entre < head > et < /head >) de cette façon :

< script type="text/javascript" src="url_du_fichier_.js" >< /script >

Important : pensez à retirer les espaces des balises "script" après le < et avant le >, ils sont présents dans l'article pour des questions de formatage.

Soit vous le laissez tel quel et le placez entre les balises < script type="text/javascript" > le script < /script > au même endroit (soit toujours entre < head > et < /head >) ce qui vous donne le script final :

 < script type="text/javascript" >
 /* ========= addEvent: simplified event attachment ========= */
 	function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
	elm.addEventListener(evType, fn, useCapture);
	return true;
	}
	else if (elm.attachEvent) {
	var r = elm.attachEvent('on' + evType, fn);
	return r;
 	}
	else {
 	elm['on' + evType] = fn;
	}
	}
/* ========= ElegantFrameKiller =========*/
 	function ElegantFrameKiller() {
	if (top != self) {
 var i, a = document.getElementsByTagName('a');
for(i=0;i < a.length;i++) a[i].target='_top';
 }
	}
 /* ========= Lance la fonction ElegantFrameKiller au chargement de la page =========*/
addEvent(window,'load',ElegantFrameKiller);
 	< /script >

Et voila, tout simplement.

Merci encore Xerox.

Cordialement,
Aymeric Jacquet

Tags :

Be Sociable, Share!

Articles similaires

    None Found

3 Commentaires pour Script élégant de contournement de frame sans jQuery

  • Webjax

    Bonjour,

    Cet article est très intéressant. Parler de JQuery est une action
    d’utilité publique pour le web.
    Vous pouvez consulter plus d’informations sur le site http://www.je-suis-un-gros-spammeur.eu
    et plus particulièrement la rubrique (Edité bla bla bla)
    qui présente la documentation officielle de Jquery en version française.

    Vive le web2.0 et ajax, longue vie aux codeurs :-)

    Le 19 mai 2008 à 12 h 44 min

  • nyamsprod

    if (top != self) {
    for(var i = 0, a; a = document.links[i]; i++) {
    a[i].target=’_top’;
    }
    }

    Et surtout le mettre en bas de page….
    1) C’est LE plus simple,
    2) LE plus rapide, si ta page contient beaucoup d’images et d’éléments multimédia, la fonction addEvents de Dean Edwards attendra le chargement de TOUT ton contenu avant d’être déclenché. Ce n’est pas le cas ici!!
    3) Comme on utilise une propriété du DOM0 (document.links), cela fonctionne même sous IE5 et Netscape 4 :D

    Le 20 août 2008 à 22 h 19 min

  • nyamsprod : je suis très content de ton commentaire pour deux raisons. La première, c’est cette version du script que tu proposes, la deuxième, c’est parce que je viens de retrouver ce satané script pour targeter _blank tous les liens externes que tu avais pondu il y a quelques temps et que je ne retrouvais plus, ne sachant plus ou je l’avais trouvé. ;)

    Merci deux fois donc.

    Le 20 août 2008 à 23 h 22 min