web-dev-qa-db-fra.com

Actualiser iFrame (problème de cache)

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?

javascripthtmliframe
18
Ramiz Uddin

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

24
Simone Margaritelli

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.

9
Pekka 웃

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

8
Homero Barbosa

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);
}
0
justkt

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;
});
0
Willito