Обновить iFrame (проблема с кэшем)

Мы получаем странную проблему, по которой мы не уверены, что именно вызывают ее. Позвольте мне подробно остановиться на этом вопросе. Предположим, у нас есть две разные html-страницы a.html и b.html. И немного script, написанное в 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>

Серверный компонент постоянно обновляет файлы a.html и b.html. Проблема заключается в том, что содержимое обоих файлов успешно обновляется на стороне сервера. Если мы откроем, мы увидим обновленные изменения, но клиент получит более старое содержимое, которое не покажет обновленные изменения.

Любая идея?

Ответ 1

Добавьте это в a.html и 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>

Чтобы отключить проверку кеша

Ответ 2

Если вы можете добавить серверные инструкции к этим файлам HTML, вы можете отправить соответствующие заголовки для предотвращения кеширования:

Убедитесь, что веб-страница не кэширована, во всех браузерах (я думаю, что согласие состоит в том, что второй ответ лучше, а не принятый)

Ответ Simone уже имеет дело с метатегами.

Дешевый быстрый трюк заключается в том, чтобы добавить случайное число в качестве параметра GET:

page_1.html?time=102398405820

если это изменяется при каждом запросе (например, с использованием текущего времени), перезагрузка wil также будет принудительно активирована каждый раз.

Ответ 3

Попробуйте следующее:

<script>
    var frameElement = document.getElementById("frame-id");
    frameElement.contentWindow.location.href = frameElement.src;
</script>

Это заставит iframe перезагружаться, даже если он был кэширован браузером

Ответ 4

Для одного из возможных решений этого, передайте "параметр кеша" на ваши вызовы в a.html и b.html. Например

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=" + cacheValueParam;
    reloadFrame(document.getElementById('myFrame'), url);
}

Ответ 5

Homero Barbosa Solution работал как шарм. В моем случае у меня на странице было разное количество iframe, поэтому я сделал следующее:

$('.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;
});