Rafraîchir une iframe

Il est parfois utile de rafraîchir une <iframe> dans une page web. Cela permet par exemple de recentrer une Google Maps après avoir affiché une infobulle.

Dans l’exemple, je vais placer un bouton juste au dessus de l’<iframe> pour la recharger.

Créer le bouton

Une classe reload_iframe est déclarée pour le css

<div class="reload_iframe"><input type="button" id="btn" value="Rafraîchir" /></div>

Le script

function reload() {
document.getElementById('iframeid').src += '';
} btn.onclick = reload;	

Le css

À adapter selon votre site.

#btn {
  border-radius:0.5em 0.5em 0 0;
  border: 2px solid #ccc;
  font-size: .9em;
  padding: .4em;
  background: transparent;
}
.reload_iframe {
  text-align:center;
  margin-bottom: -2px;
}

Il suffit maintenant d’intégrer l’iframe à la page web sous la forme :

<iframe id="iframeid" src="url_iframe"></iframe>

Exemple