06/05/2013 Rafraîchir une iframe
Dès la rédaction du titre de cet article, je me demande : dit-on "un iframe" ou "une iframe" ?
Les deux peuvent se justifier :
- Un iframe, c'est UN cadre (de l'anglais frame "cadre"), donc masculin !
- Un iframe, c'est UNE balise HTML, donc féminin !
<iframe src='http://www.example.com'></iframe>
Si je m'attarde sur la question du genre de ce mot, ce n'est pas par passion pour la linguistique (quoi que...). Comme vous le constaterez dans quelques instants, cette nuance aide à répondre à la question : quel code JavaScript utiliser pour rafraîchir un(e) iframe ?
J'ai bien sûr cherché sur un de mes sites préférés : stackoverflow. Les réponses des participants y sont triées par note, si bien que les plus pertinentes figurent en tête de page. Mais toutes apportent plus ou moins les mêmes réponses. Soit à base de fonction .reload() soit triturant l'argument src de la balise. Entre les impossibilités dues à la sécurité et les incompatibilités des navigateurs, on peut conclure que ça ne fonctionne pas !
J'étais proche de baisser les bras, lorsque, en désespoir de cause, sur la page How to reload an iframe ? je me résous à lire une soluce estampillée d'une note négative : -1 ! Faut-il s'attendre au pire ? Bien au contraire. C'est la seule valable. Elle est proposée par un Philippin nommé hubert17 et consiste non pas à rafraîchir la page de destination mais à recréer l'iframe. Pour ce faire, il suffit de l'entourer d'un conteneur ...
<div id='iframe_container'>
<iframe src='http://www.example.com'></iframe>
</div>
... dont on rafraîchit le contenu :
document.getElementById('iframe_container').innerHTML=document.getElementById('iframe_container').innerHTML;
Et ça marche !
En début de billet, je distinguais "un iframe" (cadre) et "une iframe" (balise). Une distinction similaire est à l'œuvre ici.
Cette méthode présente néanmoins une faiblesse : la balise étant recréée, le bloc disparaît momentanément du document, ce qui engendre un effet visuel disgrâcieux. Qu'à cela ne tienne ! Un petit coup de jQuery et ce défaut devient stylé.
Dans l'exemple ci-dessous, j'utilise un effet de type "slide" entre deux rafraîchissements. Cliquez sur le bouton "refresh".
Voici le code source :
<button onclick="$('#iframe_container').slideUp(
'fast',
function() {
document.getElementById('iframe_container').innerHTML=document.getElementById('iframe_container').innerHTML;
$('#iframe_container').slideDown(
'fast',
''
);
}
);">Refresh</button>
<div style='min-height:50px'>
<div id='iframe_container'>
<iframe src='https://www.nuweb.fr/test-iframe.php' style='height:50px;width:90%;border:0'>
</iframe>
</div>
</div>
Quels enseignements tirer ?
On aurait tort d'ignorer systématiquement les solutions mal notées. Peut-être sont-elles juste mal comprises de la majorité.
On aurait tort de négliger une solution sous prétexte qu'elle présente un défaut visuel. Un soupçon de jQuery et le voilà changé en effet de style.
Commentaires
Ajouter un commentaire :
- Votre commentaire a bien été posté et sera publié après validation par le webmaster du site.
Je cherche un moyen de contourner l'affichage du titre d'une vidéo youtube intégrée.
Pour cela je pense partir d'une Iframe qui contient une image (à la place de la vidéo) et quand on clique, on rafraîchit l'Iframe avec le code intégration de youtube...
C'est hors de ma portée, mais vous prouvez que c'est faisable.
Merci,
Jeff ( wwwJeffcajon.com )