Question

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

Answer 1

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

要小心，在Firefox中，window.frames[]不能通过id索引，而是通过名称或索引

Answer 2

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

它会重新加载iframe，甚至跨域！使用IE7 / 8，Firefox和Chrome进行测试。

Answer 3

如果使用jQuery，这似乎有效：

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

我希望stackoverflow不会太难看。

Answer 4

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

Answer 5

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

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

Answer 6

由于same origin policy，修改指向其他域的iframe时无效。如果您可以定位较新的浏览器，请考虑使用HTML5's Cross-document messaging。您可以在此处查看支持此功能的浏览器：http://caniuse.com/#feat=x-doc-messaging。

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

Answer 7

我刚刚在chrome中遇到过这种情况，唯一有用的就是删除并替换iframe。例如：

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

非常简单，其他答案中没有涉及。

Answer 8

for new url

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

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

重载

location.reload();

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

Answer 9

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

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

Answer 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米）和Opera（12.0.2）工作。

也许我可以通过实际测试重载功能做得更好，但这对我来说已经足够了。：）

Answer 11

现在要对chrome 66进行此操作，请尝试以下方法：

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

Answer 12

如果你使用Jquery，那么就有一个行代码。

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

如果你和同一个父母一起工作，那么

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

Answer 13

您是否考虑过向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>

它不会被看到＆amp;如果您知道参数是安全的那么它应该没问题。

Answer 14

对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;
}

Answer 15

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

使用jQuery thickBox时发现它并试图在thickbox iframe中重新打开相同的页面。然后它只显示了之前打开的页面。

Answer 16

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

window.location.reload();

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

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

Answer 17

使用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();" />

Answer 18

如果您尝试了所有其他建议，并且无法使其中任何一项工作（例如我无法做到），那么您可以尝试一些可能有用的建议。

<强> 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，组织成组，我会随意显示/隐藏。从逻辑上讲，您希望能够轻松快速地刷新任何给定的帧。

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

话虽如此，我知道它不是世界上最干净的东西，但它适用于我的目的。希望这有助于某人。现在，如果我能够弄清楚如何在每次iframe内部动画时保持iframe滚动父页...

修改我意识到这并没有刷新＆＃34; iframe就像我希望的那样。它会重新加载iframe的初始来源。仍然无法弄清楚为什么我无法使用任何其他选项。

<强>更新我无法使用任何其他方法的原因是因为我在Chrome中对它们进行了测试，Chrome无法让您访问iframe的内容（解释：{{3} }）如果它不是来自同一个地方（据我所知）。经过进一步测试，我无法在FF中访问contentWindow。

AMENDED 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); } });

Answer 19

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

Answer 20

出于调试目的，可以打开控制台，将执行上下文更改为他想要刷新的帧并执行document.location.reload()

Answer 21

另一种解决方案。

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

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

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

21 个答案: