刷新 iFrame（缓存问题）答案

【问题标题】：Refresh iFrame (Cache Issue)刷新 iFrame（缓存问题）
【发布时间】：2011-02-01 05:49:28
【问题描述】：

我们遇到了一个奇怪的问题，我们不确定究竟是什么原因造成的。让我详细说明一下这个问题。假设，我们有两个不同的 html 页面 a.html 和 b.html。还有一个用 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。问题是两个文件的内容都在服务器端成功更新。如果我们打开，我们可以看到更新的更改，但客户端获取的旧内容不显示更新的更改。

有什么想法吗？

【问题讨论】：

标签： javascript html iframe

【解决方案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>

强制不进行缓存检查

【讨论】：

@Ben - 没有任何迹象表明在这个问题中使用了 XHTML。例如，输入也没有结束标签。
这个解决方案对我不起作用，请检查this question

【解决方案2】：

如果您可以向这些 HTML 文件添加服务器端指令，则可以发送适当的标头以防止缓存：

Making sure a web page is not cached, across all browsers（我认为第二个答案是最好的，而不是公认的）

Simone 的回答已经涉及元标签。

一个便宜的快速技巧是添加一个随机数作为 GET 参数：

page_1.html?time=102398405820

如果每次请求都会更改（例如使用当前时间），那么每次都会强制重新加载。

【讨论】：

对随机数技巧的幼稚实现的一个警告是，您可能会在重复调用时得到像 "page_1.html?time=123?time=456?time=789?time=012" 这样的 URL。无害但丑陋的恕我直言。
这里是在 javascript 中为 iframe.src 添加时间。函数 reloadIframe() { var iframe = document.getElementById('iframeId'); var d = 新日期（）； iframe.src = iframe.src + "?"+ d.getTime(); }

【解决方案3】：

尝试以下方法：

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

这将强制重新加载 iframe，即使它已被浏览器缓存

【讨论】：

这是否记录在任何地方？

【解决方案4】：

我想把Vishwas comment 作为一个单独的答案，扩展 Pekka’s answer

//ensure iframe is not cached
function reloadIframe(iframeId) {
    var iframe = document.getElementById(iframeId);
    var d = new Date();
    if (iframe) {
        iframe.src = iframe.src + '?ver=' + d.getTime();
        //alternatively frameElement.contentWindow.location.href = frameElement.src; //This will force the iframe to be reloaded even if it was cached by the browser
    }
}
reloadIframe('session_storage_check');

【讨论】：

【解决方案5】：

Homero Barbosa 的解决方案非常有效。就我而言，页面上有不同数量的 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;
});

【讨论】：

【解决方案6】：

对于一个可能的解决方案，将“缓存参数”传递给您对 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=" + cacheParamValue;
    reloadFrame(document.getElementById('myFrame'), url);
}

【讨论】：