如何使用 Javascript 刷新 IFrame？答案

【问题标题】：How to refresh an IFrame using Javascript?如何使用 Javascript 刷新 IFrame？
【发布时间】：2011-01-05 02:39:03
【问题描述】：

我有一个带有 IFrame 和 Button 的网页，一旦按下按钮，我需要刷新 IFrame。这可能吗，如果可以，怎么办？我搜索并找不到任何答案。

【问题讨论】：

What's the best way to reload an iframe using JavaScript?的可能重复

标签： javascript iframe

【解决方案1】：

如果 iframe 是从同一个域加载的，你可以这样做，这更有意义：

iframe.contentWindow.location.reload();

【讨论】：

【解决方案2】：

如果您使用哈希路径（如 mywebsite.com/#/my/url），在切换哈希时可能不会刷新帧：

<script>
    window.onhashchange = function () {
        window.setTimeout(function () {
            let frame = document.getElementById('myFrame');
            if (frame !== null) {frame.replaceWith(frame);}
        }, 1000);
    }
</script>

很遗憾，如果您不使用超时，JS 可能会在页面完成加载内容之前尝试替换框架（从而加载旧内容）。我还不确定解决方法。

【讨论】：

【解决方案3】：

2017：

如果它在同一个域中：

iframe.contentWindow.location.reload();

会起作用。

【讨论】：

【解决方案4】：

直接重置src属性：

iframe.src = iframe.src;

使用缓存清除的时间戳重置 src：

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

查询字符串选项不可用时清除 src（数据 URI）：

var wasSrc = iframe.src

iframe.onload = function() {
    iframe.onload = undefined;
    iframe.src = wasSrc;
}

【讨论】：

【解决方案5】：

你可以用这个简单的方法

function reloadFrame(iFrame) {

    iFrame.parentNode.replaceChild(iFrame.cloneNode(), iFrame);

}

【讨论】：

【解决方案6】：

你可以用这个：

Js：

function refreshFrame(){
    $('#myFrame').attr('src', "http://blablab.com?v=");
}

HTML：

`<iframe id="myFrame" src=""></iframe>`

JS 小提琴：https://jsfiddle.net/wpb20vzx/

【讨论】：

这个问题与流行的 JavaScript library 叫做 jQuery 无关。
Math.round() 会做什么？这里看起来完全没用。
您好我使用了 Math.round() 因为某些浏览器可以缓存 Url - 页面所以刷新不起作用。

【解决方案7】：

如果你的 iframe 的 URL 没有改变，你可以重新创建它。

如果您的 iframe 不是来自同一来源（协议方案、主机名和端口），您将无法知道 iframe 中的当前 URL，因此您需要 iframe 文档中的脚本来与其父窗口（页面的窗口）。

在 iframe 文档中：

window.addEventListener('change', function(e) {
  if (e.data === 'Please reload yourself') {
    var skipCache = true; // true === Shift+F5
    window.location.reload(skipCache);
  }
}

在您的页面中：

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);

【讨论】：

【解决方案8】：

适用于 IE、Mozzila、Chrome

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);

【讨论】：

【解决方案9】：

如果页面中有多个 iFrame，则此脚本可能很有用。我假设 iFrame 源中有一个特定的值，可用于查找特定的 iFrame。

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
    var source =  iframes[i].attributes.src.nodeValue;
    if(source.indexOf('/yourSorce') > -1){
        yourIframe = iframes[i];
    }   
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

将“/yourSource”替换为您需要的值。

【讨论】：

【解决方案10】：

这里是 HTML sn-p:

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

还有我的 Javascript 代码：

window.onload = function(){
setInterval(function(){
    parent.frames['idFrame'].location.href = "chat.txt";
},1000);}

【讨论】：

【解决方案11】：

这应该会有所帮助：

document.getElementById('FrameID').contentWindow.location.reload(true);

编辑：根据@Joro 的评论修正了对象名称。

【讨论】：

这在 IE9 中不起作用。您应该使用 contentWindow 而不是 contentDocument。
感谢您的回答。此外，如果您必须积极地在 iframe 中将另一个页面刷新到另一个页面，那么您可以使用 reload(true) 而不是：document.getElementById('FrameID').contentWindow.location.replace(new_url);
这不适用于具有不同来源（协议、主机名或端口）的 iframe。

【解决方案12】：

从here得到这个

var f = document.getElementById('iframe1');
f.src = f.src;

【讨论】：

如果进入iFrame改页面，这个方法会失去导航

【解决方案13】：

var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;

【讨论】：

它在这个版本的 Chrome 中适用于我：Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1)
仅供参考 - 目前（截至 2013 年 1 月）存在一个 Chromium 项目错误 (code.google.com/p/chromium/issues/detail?id=172859)，它会导致 iframe 更新添加到文档历史记录中。
如果进入iFrame换页，这个方法会失去导航
var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src;
这对我来说非常适合 chrome document.getElementById('frame_id').contentDocument.location.reload(true);