Parade aux iframes

Coucou toi !

Ne nous mentons pas, nous nous servons sans cesse des iframes sur nos forums. Pourquoi ? Tout simplement pour éviter de toucher aux templates sans arrêt et permettre à tous nos admins de faire des modifications. Cependant, les iframes ont leur limite: bloquées par les bloqueur de pub, parfois coupées si elles sont plus grandes que les dimensions indiquées.

Nous allons voir dans ce tutoriel une petite astuce, une parade aux iframes. L'idée va être la suivante: je code ce que je veux dans une page HTML de mon forum, puis, grâce à du javascript, je vais intégrer ce code dans ma page. Le gros avantage c'est que le navigateur fera comme si ton code avait toujours fait partie de la page HTML, du coup, il prendra même en compte la CSS du forum ^^

Pré-requis :
• être admin ;
• avoir accès aux templates du forum ;
• avoir des notions de CSS et HTML.

Ce tutoriel va se diviser en 3 étapes et, tu vas voir, ce n'est vraiment pas compliqué.


J'ai décidé de faire 2 blocs:
• Un bloc pour mes partenaires :

Spoiler:

• Un bloc pour mon recrutement

Spoiler:

Je vais aller mettre chacun de ces codes dans une page HTML de mon forum (Panneau d'admin > Modules > HTML & Javascript > Gestion des pages HTML) et je vais bien retenir les 2 numéros de page :

Spoiler:

• Pour les Partenaires: /h5-l
• Pour le recrutement: /h1-l

C'est surtout le h*- qui est important ^^ Ensuite, tu peux mettre ce que tu veux


Maintenant on va devoir préparer une balises qui va recevoir nos codes. Personnellement, je veux que mes partenaires et les infos sur le recrutement soient affichés dans le footer sur toutes mes pages mais avant les liens par défaut de FA.

Spoiler:

Je vais donc aller modifier le template “overall_footer_begin” (Panneau d'admin > Affichage > Templates > Général) et avant :

Code:

<div id="page-footer">

Je vais coller ma structure et 2 balises avec un id spécifique :

Code:

<footer id="footer" class="table">
  <section class="table-cell">
    <div id="footer-partenaires"> </div>
  </section>
  <section class="sep"> </section>
  <section class="table-cell">
    <div id="footer-recrutement">&nbsp;</div>
  </section>
</footer>

• id="footer-partenaires" recevra le code de mes partenaires ;
• id="footer-recrutement" recevra le code de mon recrutement.

Je valide et je publie.

Si on s'arrête là, rien ne se passe sur le forum.


On va maintenant ajouter le code HTML définis en (1) dans mes balises “réceptacles” grâce à du javascript. Pour cela, on va utiliser une fonction disponible dans la bibliothèque Jquery: load(). Cette fonction va aller charger une page HTML (ou une partie de page) dans une balise spécifique. Voilà comment elle se présente :

Code:

$('#receptacle').load('page-a-charger.html');

Si tu veux récupérer une partie spécifique de ta page, il te suffit de la cibler grâce à la CSS ; ton code deviendra donc :

Code:

$('#receptacle').load('page-a-charger.html #bloc-a-recuperer');

Du coup, ici, pour mes 2 blocs j'aurai :

Code:

$('#footer-partenaires').load('/h5-l');
  $('#footer-recrutement').load('/h1-l');

Je vais ensuite appeler ces 2 fonctions une fois ma page chargée, ce qui donne :

Code:

$(document).ready(function(){
  $('#footer-partenaires').load('/h5-l');
  $('#footer-recrutement').load('/h1-l');
});

Il ne me reste plus qu'à ajouter ce code dans les javascript de mon forum (Panneau d'admin > Modules > HTML & Javascript > Gestion des code Javascript) et à l'afficher sur toutes les pages :

Spoiler:

Et pouf ! Le tour est joué :


Sur les vieux forums, il peut arriver qu'il y ait des soucis liés à l'encodage du forum. Dans ce cas, malheureusement, il va falloir utiliser les codes html pour les caractères spéciaux. Voici les principaux :

Code:


é = &*eacute;
è = &*egrave;
ê = &*ecirc;
à = &*agrave;
â = &*acirc;
ù = &*ugrave;
ç = &*ccedil;

Pense à retirer les *.

Si tu as besoin d'autres caractères, n'hésite pas à jeter un oeil à ce référentiel : clic.

---

Eh voilà ! C'est terminé !