Javascript 刷新 iFrame（缓存问题）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2524502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh iFrame (Cache Issue)
提问by Ramiz Uddin
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. And a little script written in index.html:
我们遇到了一个奇怪的问题，我们不确定究竟是什么原因造成的。让我详细说明这个问题。假设，我们有两个不同的 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 server component is continuously updating both files a.html and 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.
服务器组件不断更新文件 a.html 和 b.html。问题是两个文件的内容都在服务器端成功更新。如果我们打开，我们可以看到更新的更改，但客户端获取未显示更新更改的旧内容。
Any idea?
任何的想法？
回答by Simone Margaritelli
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
强制不进行缓存检查
回答by Pekka
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 (e.g. using the current time), reloading wil get forced every time, too.
如果每次请求都会改变（例如使用当前时间），则每次都会强制重新加载。
回答by Homero Barbosa
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，即使它已被浏览器缓存
回答by Willito
Homero Barbosa's Solution worked like a charm. In my case, I had a varying number of iframes on the page, so I did the following:
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;
});
回答by justkt
For one possible solution to this, pass a "cache parameter" to your calls to a.html and b.html. For example
对于此问题的一种可能解决方案，将“缓存参数”传递给您对 a.html 和 b.html 的调用。例如
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);
}
