Script élégant de contournement de frame sans jQuery


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.


3 réponses à “Script élégant de contournement de frame sans jQuery”

  1. 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 :-)

  2. 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

  3. 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.