Javascript 什么&x2019；重新加载/刷新iframe的最佳方式是什么？

我想使用JavaScript重新加载

。到目前为止，我发现最好的方法是将iframe的

src

属性设置为自身，但这不是很干净。有什么想法吗

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

---

注意，在Firefox中，

window.frames[]

不能按id索引，但在IE8中使用.Net时，可以按名称或索引索引，第一次设置

iframe.src

， 但是第二次设置

iframe.src

并不会提高iframed页面的

页面加载量。
为了解决这个问题，我使用了
iframe.contentDocument.location.href=“NewUrl.htm”

使用jQuery thickBox并尝试在thickBox iframe中重新打开同一页面时发现它。
然后它只是显示了先前打开的页面。
由于，当修改指向不同域的iframe时，这将不起作用。如果你可以针对更新的浏览器，考虑使用。您可以在此处查看支持此功能的浏览器：

如果您不能使用HTML5功能，那么您可以遵循此处概述的技巧：。这篇博客文章也很好地定义了问题

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

它将重新加载
iframe
，甚至跨域！
使用IE7/8、Firefox和Chrome进行测试。
如果使用jQuery，这似乎是可行的：

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

我希望stackoverflow不会太难看。
对IE使用重载，对其他浏览器设置src。（重新加载在FF上不起作用）
在IE7、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;
}


top.frames['DetailFrame'].location=top.frames['DetailFrame'].location；
我刚刚在chrome中遇到了这个问题，唯一有效的方法就是移除和更换iframe。例如：

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

$（.iframe_包装器”）.find（“iframe”）.remove（）；
变量iframe=$（''）；
$.find（“.iframe\u包装”）.append（iframe）；

非常简单，其他答案中没有涉及。
yajra的帖子上的改进。。。我喜欢这个想法，但讨厌浏览器检测的想法

我更倾向于ppk的观点，即使用对象检测而不是浏览器检测，
(),
因为那时你实际上是在测试浏览器的功能，并相应地采取行动，而不是你认为浏览器当时的功能。也不需要太多难看的浏览器ID字符串解析，也不排除您一无所知的功能完美的浏览器

因此，与其查看navigator.AppName，不如做类似的事情，实际测试您使用的元素？（如果你想变得更花哨，你可以使用try{}块，但这对我很有用。）

通过这种方式，您可以尝试任意多个不同的排列，而不会导致javascript错误，如果所有其他排列都失败，您可以做一些明智的事情。在使用对象之前，要测试它们需要做更多的工作，但是，依我看，这会产生更好、更安全的代码

曾在IE8、Firefox（15.0.1）、Chrome（21.0.1180.89m）和Opera（12.0.2）Windows上为我工作

也许我可以通过实际测试重新加载功能做得更好，但现在这对我来说已经足够了。：）
 如果上述所有方法都不适用于您：

window.location.reload();

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

或者我不完全理解这一点，胡言乱语，无论如何，这对我来说就像一个魅力：）
对于新的url

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

assign（）方法加载一个新文档

重新装载

location.reload();

reload（）方法用于重新加载当前文档。
是否考虑在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>


var i=document.getElementsById（“iframe”）[0]，
src=i.src，
数字=1；
//更新
i、 src=src+“？ignoreMe=“+编号；
数字++；

它不会被看到&如果您知道该参数是安全的，那么它应该是好的。
如果您尝试了所有其他建议，但没有任何一个能起作用（就像我不能），那么下面是一些您可以尝试的可能有用的方法

HTML

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


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

我应该注意到，我目前正在进行的项目，即这个测试平台中使用的项目，是一个带有索引位置的单页网站（例如index.html#home）。这可能与为什么我无法获得任何其他解决方案来刷新我的特定框架有关

话虽如此，我知道这不是世界上最干净的东西，但它符合我的目的。希望这对别人有帮助。现在，如果我能弄清楚如何防止每次iframe内有动画时iframe滚动父页面

编辑：
我意识到这并不像我希望的那样“刷新”iframe。但它将重新加载iframe的初始源。我还是不明白为什么我找不到其他的办法

更新：
我无法使用任何其他方法的原因是因为我在Chrome中测试了它们，Chrome不允许您访问iframe的内容（解释：），如果它不是来自同一个位置（据我所知）。经过进一步测试，我也无法访问FF中的contentWindow

修订版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);
});

$('.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);
    }
});

如果您使用Jquery，那么只有一行代码

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

如果你和同一位家长一起工作

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

在我的例子中，简单地替换iframe元素的
src
属性并不令人满意，因为在加载新页面之前，人们会看到旧内容。如果您想提供即时的视觉反馈，这会更好：

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

使用
self.location.reload（）
将重新加载
$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

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

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

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

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

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

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