我可以使用 JavaScript 强制对 iframe 进行硬刷新吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13477451/
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
Can I force a hard refresh on an iframe with JavaScript?
提问by jkupczak
I've found many answers on Stack Overflow about how to refresh an iframe with JavaScript.
我在 Stack Overflow 上找到了很多关于如何使用 JavaScript 刷新 iframe 的答案。
For example:
例如：
They work fine. However, if the page in the iframe has changed recently, the refresh will not show this change. Is there any way I can force a hard refresh on the designated iframe so that the new version is shown?
他们工作得很好。但是，如果 iframe 中的页面最近发生了更改，则刷新将不会显示此更改。有什么方法可以强制对指定的 iframe 进行硬刷新，以便显示新版本？
回答by user2428118
If the iframeis same-origin, you can force a full page reload using
如果iframe是same-origin，则可以使用强制重新加载整页
iframe.contentWindow.location.reload(true);//The argument "true" will force all loaded resources, such as images, to be re-checked for expiry at the server
? More information at the Mozilla Developer wiki
如果您可以控制为 中的页面发送的 HTTP 标头
iframeiframe，您还可以instruct the browser not to cache it in the first place首先指示浏览器不要缓存它。此外，大多数网页完全忽略了 query string他们没有处理代码的查询字符串，因此您可以向查询字符串添加随机值或时间戳，以确保浏览器将其视为“新”页面并且不使用缓存副本：
if(iframe.src.indexOf('timestamp') > -1){ // Check if we still have a timestamp in the URL from a previous refresh
iframe.src = iframe.src.replace(/timestamp=[^&]+/, 'timestamp=' + Date.now()); // And if so, replace it instead of appending so the URL doesn't grow too long.
}else{ // Else we will append the timestamp
iframe.src += (iframe.src.indexOf('?') > -1 ? "&" : "?") + 'timestamp=' + Date.now();// If the URL contains a ?, append ×tamp=...; otherwise, append ?timestamp=...
}
Use new Date().getTime()instead of Date.now()if support for older browsersis important.
如果对旧浏览器的支持很重要，请使用new Date().getTime()代替。Date.now()
回答by George
Reload the iFrame with a URL, but give it a unique id...
用 URL 重新加载 iFrame，但给它一个唯一的 id...
var rand = Math.floor((Math.random()*1000000)+1);
var iframe = document.getElementById('youriframe');
iframe.src = "http://www.yourpage.com/yourpage.html?uid="+rand;
It would be easier to give you a solution if we could see the code that you currently have.
如果我们可以看到您当前拥有的代码，那么为您提供解决方案会更容易。
Hope it helped.
希望它有所帮助。
回答by John McAulay
I struggled with this for ages. A lot of the methods mentioned above work if your iframe is on the same domain as your web page.
我为此苦苦挣扎了多年。如果您的 iframe 与您的网页在同一个域中，那么上面提到的许多方法都有效。
However if your iframe is from another domain these methods don't work (due to CORS policy).
但是，如果您的 iframe 来自另一个域，则这些方法不起作用（由于 CORS 政策）。
Changing the src attribute kind of works, but doesn't result in a proper redraw of the iframe. This can be particularly evident if you're embedding a Google Map in your page with an iframe.
更改 src 属性类型有效，但不会导致正确重绘 iframe。如果您使用 iframe 在页面中嵌入 Google 地图，这一点尤其明显。
What I eventually discovered is that you need to:
我最终发现的是，您需要：
1) Save the source attribute of the iframe
1）保存iframe的source属性
2) Remove the iframe from the DOM
2) 从 DOM 中移除 iframe
3) Add a random query parameter to the end of the source attribute you saved in step 1.
3) 将随机查询参数添加到您在步骤 1 中保存的源属性的末尾。
4) Add an iframe back to the DOM (with the unique source attribute).
4) 将 iframe 添加回 DOM（具有唯一的 source 属性）。
//save the source of the iframe minus the unique identifier
tempElementSrc = $('#the-iframe').attr('src').substring(0,$('#the-iframe').attr('src').lastIndexOf('&', $('#the-iframe').attr('src')));
//remove the iframe
$('#the-iframe').remove();
//readd the iframe with the new source including random query string
$('#container-id').append('<iframe width=\"100%\" id=\"iframe-id\" src=\"' + tempElementSrc + '&' + Date.now() + '\">');
