16

我在 Stack Overflow 上找到了很多关于如何使用 JavaScript 刷新 iframe 的答案。

例如：

他们工作正常。但是，如果 iframe 中的页面最近发生了更改，则刷新不会显示此更改。有什么方法可以强制对指定的 iframe 进行硬刷新，以便显示新版本？

4

3 回答 3

22

如果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

↪在 jsFiddle 查看示例

↪ Mozilla Developer wiki 上的更多信息

如果您可以控制为页面发送的 HTTP 标头iframe，您还可以指示浏览器一开始就不要缓存它。
此外，大多数网页完全忽略查询字符串中没有处理代码的参数，因此您可以在查询字符串中添加随机值或时间戳，以确保浏览器将其视为“新”页面并且不会使用缓存副本：

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 &timestamp=...; otherwise, append ?timestamp=...
}

如果对旧版浏览器的支持很重要，请使用new Date().getTime()而不是。Date.now()

于 2012-11-20T16:33:03.843 回答
9

使用 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;

如果我们可以看到您当前拥有的代码，那么为您提供解决方案会更容易。

希望它有所帮助。

于 2012-11-20T16:23:26.567 回答
3

我为此挣扎了很久。如果您的 iframe 与您的网页位于同一域中，则上述许多方法都有效。

但是，如果您的 iframe 来自另一个域，则这些方法不起作用（由于 CORS 策略）。

更改 src 属性类型的作品，但不会导致 iframe 的正确重绘。如果您使用 iframe 在页面中嵌入 Google 地图，这一点尤其明显。

我最终发现的是，您需要：

1）保存iframe的source属性

2) 从 DOM 中移除 iframe

3) 在步骤 1 中保存的源属性末尾添加一个随机查询参数。

4) 将 iframe 添加回 DOM（具有唯一源属性）。

 //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() + '\">');
于 2019-07-03T16:18:21.883 回答