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 :