Nous avons un problème étrange sur lequel nous ne savons pas exactement ce qui le cause. Laissez-moi élaborer la question. Supposons que nous ayons deux pages html différentes, a.html et b.html. Et un petit script écrit dans index.html:
<html>
<head>
<script>
function reloadFrame(iframe, src) {
iframe.src = src;
}
</script>
</head>
<body>
<form>
<iframe id="myFrame"></iframe>
<input type="button" value="Load a.html" onclick="reloadFrame(document.getElementById('myFrame'), 'a.html')">
<input type="button" value="Load b.html" onclick="reloadFrame(document.getElementById('myFrame'), 'b.html')">
</form>
</body>
</html>
Un composant serveur met continuellement à jour les fichiers a.html et b.html. Le problème est que le contenu des deux fichiers est correctement mis à jour côté serveur. Si nous ouvrons, nous pouvons voir les modifications mises à jour mais le client récupère l'ancien contenu qui ne montre pas les modifications mises à jour.
Une idée?
Ajoutez ceci dans a.html et b.html
<head>
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
</head>
Ne pas forcer les contrôles de cache
Si vous pouvez ajouter des instructions côté serveur à ces fichiers HTML, vous pouvez envoyer les en-têtes appropriés pour empêcher la mise en cache:
S'assurer qu'une page Web n'est pas mise en cache, sur tous les navigateurs (Je pense que le consensus est que la deuxième réponse est la meilleure, pas celle acceptée)
La réponse de Simone traite déjà des balises Meta.
Une astuce rapide et peu coûteuse consiste à ajouter un nombre aléatoire en tant que paramètre GET:
page_1.html?time=102398405820
si cela change à chaque demande (par exemple, en utilisant l'heure actuelle), le rechargement sera forcé à chaque fois.
Essayez quelque chose comme ce qui suit:
<script>
var frameElement = document.getElementById("frame-id");
frameElement.contentWindow.location.href = frameElement.src;
</script>
Cela forcera l'iframe à être rechargé même s'il a été mis en cache par le navigateur
Pour une solution possible à cela, transmettez un "paramètre de cache" à vos appels vers a.html et b.html. Par exemple
HTML
<input type="button" value="Load a.html" onclick="cacheSafeReload('a.html');">
Javascript
function cacheSafeReload(urlBase) {
var cacheParamValue = (new Date()).getTime();
var url = urlBase + "?cache=" + cacheParamValue;
reloadFrame(document.getElementById('myFrame'), url);
}
La solution de Homero Barbosa a fonctionné à merveille. Dans mon cas, j'avais un nombre variable d'iframes sur la page. J'ai donc procédé comme suit:
$('.some_selector').each(function () {
var $randid = Math.floor(Math.random() * 101);
$(this).attr({'id': 'goinOnaSafari-' + $randid});
var $frame = document.getElementById('goinOnaSafari-' + $randid);
$frame.contentWindow.location.href = $frame.src;
});