重新加载/刷新iframe的最佳方法是什么？

我想<iframe>使用JavaScript 重新加载。到目前为止，我发现的最好方法是将iframe的src属性设置为其自身，但这并不是很干净。有任何想法吗？

document.getElementById('some_frame_id').contentWindow.location.reload();

注意，在Firefox中，window.frames[]不能通过id进行索引，而只能通过名称或索引进行索引

document.getElementById('iframeid').src = document.getElementById('iframeid').src

它将iframe跨域重新加载！经过IE7 / 8，Firefox和Chrome的测试。

如果使用jQuery，这似乎可行：

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

我希望它对于stackoverflow来说不太难看。

添加空白空间也会自动重新加载iFrame。

document.getElementById('id').src += '';

window.frames['frameNameOrIndex'].location.reload();

由于采用了相同的原始政策，因此在修改指向其他域的iframe时将无法使用。如果可以使用较新的浏览器，请考虑使用HTML5的跨文档消息传递。您可以在此处查看支持此功能的浏览器：http : //caniuse.com/#feat=x-doc-messaging。

如果您不能使用HTML5功能，则可以按照此处概述的技巧进行操作：http : //softwareas.com/cross-domain-communication-with-iframes。该博客条目也很好地定义了问题。

我只是在Chrome中遇到这个问题，唯一可行的方法是移除和更换iframe。例：

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

非常简单，其他答案未涵盖。

用于新网址

location.assign("http:google.com");

Assign（）方法将加载一个新文档。

重装

location.reload();

reload（）方法用于重新加载当前文档。

src在我的情况下，仅替换iframe元素的属性并不令人满意，因为在加载新页面之前，人们会看到旧内容。如果要提供即时的视觉反馈，则效果更好：

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

对yajra帖子的改进...我喜欢这种想法，但讨厌浏览器检测的想法。

我宁愿使用ppk的观点，即使用对象检测而不是浏览器检测，（http://www.quirksmode.org/js/support.html），因为那样的话，您实际上是在测试浏览器的功能并采取相应的措施，而不是您当时认为浏览器的功能。同时也不需要太多难看的浏览器ID字符串解析，也不会排除功能强大的浏览器，而您对此一无所知。

因此，为什么不查看navigator.AppName而不是像这样进行实际测试您使用的元素呢？（如果您想变得更高级，可以使用try {}块，但这对我有用。）

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

这样，您可以尝试尝试任意数量或所需的不同排列，而不会引起JavaScript错误，并且如果其他所有方法都失败，则可以做一些明智的事情。在使用对象之前，要对它们进行测试需要做更多的工作，但是IMO可以提供更好，更安全的代码。

在Windows上的IE8，Firefox（15.0.1），Chrome（21.0.1180.89 m）和Opera（12.0.2）中为我工作。

也许我可以通过实际测试reload函数来做得更好，但这对我来说已经足够了。:)

现在，要在chrome 66上执行此操作，请尝试以下操作：

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}

在使用.Net的IE8中，iframe.src第一次设置可以，但是iframe.src第二次设置不会提高page_loadiframed页面的。为了解决我用iframe.contentDocument.location.href = "NewUrl.htm"。

在使用jQuery thinBox并尝试在thickbox iframe中重新打开同一页面时发现它。然后，它只显示了先前打开的页面。

对IE使用reload并为其他浏览器设置src。（重新加载在FF上不起作用）在IE 7,8,9和Firefox上进行了测试

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

如果使用Jquery，则只有一行代码。

$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

如果您与同一个父母一起工作

$('#iframeID',parent.document).attr('src',$('#iframeID',parent.document).attr('src'));

如果以上所有方法都不适合您：

window.location.reload();

由于某种原因，这刷新了我的iframe，而不是整个脚本。也许是因为它放置在框架本身中，而当您尝试从另一个框架刷新框架时，所有那些getElemntById解决方案都可以工作吗？

或者我不完全理解这个，并且胡言乱语，无论如何这对我来说就像一个魅力:)

您是否考虑过将无意义的查询字符串参数附加到url？

<iframe src="myBaseURL.com/something/" />

<script>
var i = document.getElementsById("iframe")[0],
    src = i.src,
    number = 1;

//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>

它不会被显示＆如果您知道该参数是安全的，那应该没问题。

另一个解决方案。

const frame = document.getElementById("my-iframe");

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

使用self.location.reload()将重新加载iframe。

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />

<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 

如果您尝试了所有其他建议，而又没有任何一项可行（如我无法完成），那么您可以尝试一些有用的方法。

的HTML

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

JS

$('.refresh-this-frame').click(function() {
    var thisIframe = $(this).attr('rel');
    var currentState = $(thisIframe).attr('src');
    function removeSrc() {
        $(thisIframe).attr('src', '');
    }
    setTimeout (removeSrc, 100);
    function replaceSrc() {
        $(thisIframe).attr('src', currentState);
    }
    setTimeout (replaceSrc, 200);
});

我最初着手尝试通过RWD和跨浏览器测试节省一些时间。我想创建一个快速页面，其中包含一堆iframe，这些iframe被组织为可随意显示/隐藏的组。从逻辑上讲，您希望能够轻松快速地刷新任何给定的帧。

我应该注意，我目前正在处理的项目（此测试台中正在使用的项目）是一页的站点，该站点具有索引位置（例如index.html＃home）。这可能与为什么我无法获得其他任何解决方案来刷新我的特定框架有关。

话虽这么说，我知道这不是世界上最干净的东西，但是它对我来说是有效的。希望这对某人有帮助。现在，只要我能弄清楚如何使iframe每次在iframe内播放动画时都不会使iframe滚动父页面...

编辑： 我意识到这不会像我希望的那样“刷新” iframe。不过，它将重新加载iframe的初始来源。仍然不知道为什么我无法使用其他任何选项。

更新： 之所以无法使用其他方法，是因为我在Chrome中进行了测试，而Chrome不允许您访问iframe的内容（说明：Chrome的未来版本是否可能支持contentWindow / contentDocument当iFrame从本地html文件加载本地html文件时？）（如果它不是源自同一位置）（据我了解）。经过进一步测试，我也无法访问FF中的contentWindow。

修正的JS

$('.refresh-this-frame').click(function() {
    var targetID = $(this).attr('rel');
    var targetSrc = $(targetID).attr('src');
    var cleanID = targetID.replace("#","");     
    var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
    var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );      
    if (chromeTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }
    if (FFTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }       
    if (chromeTest == false && FFTest == false) {
        var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc2() {
            $(targetID).attr('src', targetLoc);
        }
        setTimeout (replaceSrc2, 200);
    }
});

为了进行调试，可以打开控制台，将执行上下文更改为要刷新的框架，然后执行 document.location.reload()