Question

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

例如：

他们工作正常。但是，如果最近iframe中的页面已更改，则刷新将不会显示此更改。有没有办法可以强制刷新指定的iframe，以便显示新版本？

Answer 1

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

↪View an example at jsFiddle

↪More information at the Mozilla Developer wiki

如果您可以控制iframe中为该页面发送的HTTP标头，您还可以instruct the browser not to cache it in the first place。

此外，大多数网页完全忽略参数他们没有处理代码的query string，因此您可以在查询字符串中添加随机值或时间戳，以确保浏览器将其视为“新”页面，并且不使用缓存副本：< p>

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=...
}

如果support for older browsers很重要，请使用new Date().getTime()代替Date.now()。

Answer 2

使用网址重新加载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;

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

希望它有所帮助。

Answer 3

我为此奋斗了很久。如果您的iframe与您的网页位于同一域中，则上面提到的许多方法都可以使用。

但是，如果您的iframe来自其他域，则这些方法不起作用（由于CORS政策）。

更改src属性是可行的，但不会正确重绘iframe。如果您要使用iframe将Google Map嵌入页面中，这一点尤其明显。

我最终发现，您需要：

1）保存iframe的源属性

2）从DOM中删除iframe

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

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() + '\">');

Answer 4

Try this code:
<script>
var iframe = document.getElementById('myframe');
iframe.src = "http://www.w3schools.com?ignore="+Math.floor(Math.random() * 1000);
</script>

我可以使用JavaScript强制对iframe进行硬刷新吗？

4 个答案: