Je suis en train de travailler sur quelques petites améliorations sur le site oyoyo.fr.

Un ajout demandé par le client consiste à ajouter une série de « pop-up » informatifs au niveau du bandeau de haut de page et qu’il puisse utiliser l’interface d’administration de son OScommerce pour gérer leurs contenus.

Pour essayer de faire quelque chose d’un peu plus « sexy » et « accessible » qu’une bonne vieille pop-up, je décide de me tourner vers le script thickBox de la bande à Jquery.

L’ensemble des librairies n’est pas trop lourd et je trouve la présentation agréable et assez simple à styler.

Je fais donc un premier essai en appelant une page test du site oyoyo.fr via le mode iframe de thickBox, simple a mettre en oeuvre, en 30 secondes hop hop ça marche.

Problème, le site s’affiche en entier dans l’iframe, et veux n’avoir dans l’iframe que le contenu correspondant à ce qui est demandé au niveau du header.

Et tiens, je me rappelle mon script retrouvé il n’y a pas si longtemps : Petit code javascript utile pour luter contre les « détournements » de contenus par frame.

On va reprendre tout ça et lui faire faire autre chose, cacher les parties du site que je ne désire pas afficher dans la pop-up, soit : le header, les colonnes droite et gauche et le footer.

On créé une petite fonction, on appelle la fonction au chargement de la page dans une iframe et voila.

Voici le code ajouté dans le head du site oyoyo :

<script type="text/javascript">
function tout_cacher()
{
  document.getElementById('header').style.display = 'none';
  document.getElementById('leftcol').style.display = 'none';
  document.getElementById('rightcol').style.display = 'none';
  document.getElementById('footer').style.display = 'none';
}

if (top != self) 
	{
		window.onload=tout_cacher
	}
</script>

La page de test : test ThickBox OYOYO ou l’on affiche le contenu de la page des CGDV.

La fonction tout_cacher est faite de façon a appliquer un stye= »display:none » aux éléments que je ne veux pas voir apparaitre.

Certains d’entre vous se diront, et alors, c’est un bête script… Pour vous oui, mais moi, javascript, c’est un peu encore du chinois, tout s’est fait par des recherches google ou des recherches dans mes ressources en ligne, comme quoi même en n’y connaissant rien, en sachant clairement ce que l’on veut, on le trouve.

EDIT du 4 Avril 2007 : petits teste de modification du code.

En fait, en étudiant les possibilités de modification du DOM, j’en suis venu à tester un « switcher » de la feuille de style au lieu de changer les comportements « à la barbare ».

Ajout d’un identifiant « id=style1 » à la ligne d’appel de la feuille de style :

<link media= »screen » rel= »stylesheet » href= »style.css » type= »text/css » id= »style1″ />

On cherche via getElementById cet élément et on change la valeur de href. Puis lors de l’exécution de la condition i(top!=self), lance la fonction du switcher ce qui donne le code javascript suivant :

<script type="text/javascript">
function changer_style()
{
  document.getElementById('style1').href = 'style-complexe.css';
}

if (top != self) 
	{
		window.onload=changer_style
	}
</script>

Plus simple et donne un meilleur contrôle sur le rendu visuel par le remplacement complet de la feuille de style.

EDIT du 4 Avril 2007 à 22h21 : Nouvelle modification du code :

Une dernière chose me chagrinait dans le code utilisé, le comportement était global, quelle que soit la « frame utilisée », la fonction changer_style se lançait.

J’ai donc récupéré l’identité de l’iframe, ici TB_iframe et modifié le script pour qu’il ne se déclenche que si l’élément parent est la frame donnée, soit au final :

<script type="text/javascript">
function changer_style()
{
  document.getElementById('style1').href = 'style-complexe.css';
}

if (top != TB_iframe) 
	{
		window.onload=changer_style
	}
</script>

Il me reste à vérifier la validité et la pertinence de ce code, mais mon firebug ne semble pas tiquer pour l’instant.

Bon et bien la pertinence est vérifiée, pour une raison inconue, ça ne fonctionne plus ce matin. Wala wala wala…

PS : au passage, si vous avez une solution plus propre hein, je suis preneur.