刷新iFrame（缓存问题）
[英]Refresh iFrame (Cache Issue)
问题描述
We are getting a weird issue on which we are not sure what exactly cause it.
我们遇到了一个奇怪的问题，我们不确定到底是什么原因造成的。 Let me elaborate the issue.让我详细说明这个问题。 Suppose, we have two different html pages a.html and b.html.假设，我们有两个不同的 html 页面 a.html 和 b.html。 And a little script written in index.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 server component is continuously updating both files a.html and b.html.服务器组件不断更新文件 a.html 和 b.html。 The problem is the content of both files are successfully updating on the server side.问题是两个文件的内容都在服务器端成功更新。 If we open we can see the updated changes but client getting the older content which doesn't show the updated changes.如果我们打开，我们可以看到更新的更改，但客户端获取的是不显示更新更改的旧内容。
Any idea?任何的想法？
7 个解决方案
解决方案1
27 已采纳 2010-03-26 15:42:49
Add this in a.html and b.html在 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>
To force no cache checks强制不进行缓存检查
解决方案2
12 2010-03-26 15:44:34
If you can add server-side instructions to those HTML files, you could send the appropriate headers to prevent caching:如果您可以向这些 HTML 文件添加服务器端指令，则可以发送适当的标头以防止缓存：
Making sure a web page is not cached, across all browsers (I think the consensus is that the 2nd answer is best, not the accepted one) 确保所有浏览器都没有缓存网页（我认为共识是第二个答案是最好的，而不是公认的）
Simone's answer already deals with Meta tags. Simone 的回答已经涉及 Meta 标签。
A cheap quick trick is to add a random number as a GET parameter:一个廉价的快速技巧是添加一个随机数作为 GET 参数：
page_1.html?time=102398405820
if this changes on every request (eg using the current time), reloading wil get forced every time, too.如果每次请求都会改变（例如使用当前时间），则每次都会强制重新加载。
解决方案3
9 2012-07-02 19:11:57
Try something like the following:尝试类似以下内容：
<script>
var frameElement = document.getElementById("frame-id");
frameElement.contentWindow.location.href = frameElement.src;
</script>
This will force the iframe to be reloaded even if it was cached by the browser这将强制重新加载 iframe，即使它已被浏览器缓存
解决方案4
1 2021-06-05 03:33:51
I want to put Vishwas comment as a separate answer, extending Pekka's answer我想把Vishwas 的评论作为一个单独的答案，扩展Pekka 的答案
//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
0 2014-01-16 16:00:45
Homero Barbosa's Solution worked like a charm. Homero Barbosa 的解决方案很有魅力。 In my case, I had a varying number of iframes on the page, so I did the following:就我而言，页面上有不同数量的 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
0 2022-02-18 11:26:24
I could not get the HTML to work.我无法让 HTML 工作。
<head>
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
</head>
For development in chrome I checked the console Network tab and found where the iframe is loaded.对于 chrome 中的开发，我检查了控制台网络选项卡并找到了 iframe 的加载位置。 I confirmed that it was loaded with a 304 response wich means it loads from cache.我确认它加载了 304 响应，这意味着它从缓存中加载。 Right click -> clear browser cache.右键单击 -> 清除浏览器缓存。
Will not work in production, but at least helps with development.不会在生产中工作，但至少有助于开发。
解决方案7
-1 2010-03-26 15:43:48
For one possible solution to this, pass a "cache parameter" to your calls to a.html and b.html.对于此问题的一种可能解决方案，将“缓存参数”传递给您对 a.html 和 b.html 的调用。 For example例如
HTML HTML
<input type="button" value="Load a.html" onclick="cacheSafeReload('a.html');">
Javascript Javascript
function cacheSafeReload(urlBase) {
var cacheParamValue = (new Date()).getTime();
var url = urlBase + "?cache=" + cacheParamValue;
reloadFrame(document.getElementById('myFrame'), url);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.