Recharger le contenu d’un iframe via Javascript

Commençons par situer le contexte: Un client me demande d’afficher une carte Google (google maps) dans un iframe (c’est le moyen le plus simple d’intégrer une carte google maps dans un site web). Sur la carte, un marqueur indique l’emplacement de l’adresse de son bureau.

Le site de mon client étant adaptif (mon dieu que ce terme est laid! Responsive design, si vous avez une meilleure traduction, je suis preneur), mon cher et bien aimé client aimerait que le marqueur soit toujours situé en plein milieu de la carte, même après qu’il ait modifé les dimensions de son navigateur, ou après qu’il ait alterné le mode paysage/portrait de sa tablette.

Après quelques recherches infructueuses, je me rends compte qu’il n’est pas possible d’exécuter du code javascript sur la carte, car celle-ci se trouve sur une autre page, et dans ce cas-ci, sur un autre serveur également (rappelez-vous, on affiche un iframe).

C’est alors que j’ai une idée intéressante: pourquoi ne pas rafraîchir le contenu de l’iframe? Ce n’est probablement pas la solution la plus optimisée, mais n’ayant aucun moyen d’exécuter du code sur la carte, je n’ai pas vraiment le choix.

Très fier de ma solution, j’écris le code permettant de rafraîchir le contenu de l’iframe et… Stupeur! Impossible de recharger le contenu de l’iframe parce que le contenu se trouve sur un autre serveur (Same origin policy).

Après quelques recherches supplémentaires, je trouve finalement une solution non élégante mais qui fait le boulot:

1
2
3

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

Il semblerait que ce code ne fonctionne pas pour tout le monde (qui a dit Internet Explorer?). Ce code-ci devrait fonctionner sur tous les navigateurs:

1
2

var iframe = document.getElementById(FrameId);
iframe.contentDocument.location=iframe.src;

J’ai trouvé cette information ici.