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

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

552792 次浏览
小开 
window.frames['frameNameOrIndex'].location.reload();
小开
最佳答案 
document.getElementById('some_frame_id').contentWindow.location.reload();

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

小开

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

当使用jQuery thickBox并尝试在thickBox iframe中重新打开同一页面时发现它。

.

.
小开

由于同源策略，当修改指向不同域的iframe时，这将不起作用。如果你的目标浏览器更新，可以考虑使用HTML5的跨文档消息传递。您可以在这里查看支持此功能的浏览器:http://caniuse.com/#feat=x-doc-messaging。

如果你不能使用HTML5的功能，那么你可以遵循这里概述的技巧:该博客条目也很好地定义了问题。

小开 
document.getElementById('iframeid').src = document.getElementById('iframeid').src
它将重载iframe，甚至跨域! 在IE7/8, Firefox和Chrome上测试

正如@user85461所提到的，如果iframe src URL中有一个散列(例如http://example.com/#something)，这种方法是不工作。

小开

如果使用jQuery，这似乎是可行的:

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

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;
}
小开 
<script type="text/javascript">
top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script>
小开

我刚刚遇到这在铬和唯一的工作是删除和替换iframe。例子:

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

很简单，其他答案中没有提到。

小开

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

我更愿意接受ppk的观点，使用对象检测而不是浏览器检测， (http://www.quirksmode.org/js/support.html), 因为这样你实际上是在测试浏览器的能力，并据此进行操作，而不是你当时认为浏览器的能力。也不需要那么多丑陋的浏览器ID字符串解析，也不会排除你不了解的功能完美的浏览器

不需要看导航器。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错误，并在所有其他方法都失败时执行一些合理的操作。在使用对象之前，对它们进行测试需要做更多的工作，但是，在我看来，这有助于编写更好、更安全的代码。

为我在IE8、Firefox(15.0.1)、Chrome (21.0.1180.89 m)和Windows上的Opera (12.0.2 m)工作过。

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

小开

如果以上方法对你都不起作用:

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>

它不会被看到&如果你知道参数是安全的，那么它应该是好的。

小开

如果你尝试了所有其他的建议，但没有一个奏效(就像我一样)，这里有一些你可以尝试的可能有用的建议。

超文本标记语言

<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和跨浏览器测试来节省一些时间。我想创建一个快速的页面，里面有一堆iframes，组织成我可以随意显示/隐藏的组。从逻辑上讲，您希望能够轻松快速地刷新任何给定的帧。

我应该指出的是，我目前正在进行的项目，也就是在这个测试台上使用的项目，是一个单页站点，站点的位置有索引(例如index.html#home)。这可能与为什么我不能得到任何其他解决方案来刷新我的特定框架有关。

话虽如此，我知道这不是世界上最干净的东西，但它对我的目的很有效。希望这能帮助到一些人。现在，如果我能弄清楚如何保持iframe在每次iframe内有动画时滚动父页…

<强>编辑: 我意识到这并没有像我所希望的那样“刷新”iframe。它将重新加载iframe的初始源。仍然不明白为什么我不能让任何其他选项工作..

< >强更新: 我不能让任何其他方法工作的原因是因为我在Chrome中测试它们，Chrome不允许你访问iframe的内容(解释:当iFrame从本地html文件加载本地html文件时，未来的Chrome版本是否可能支持contentWindow/contentDocument ?)，如果它不是来自同一个位置(据我所知)。经过进一步测试，我也无法访问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);
}
});
小开

如果你使用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()将重新加载iframe。

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

小开

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

小开

将空字符串附加到iFrame的src属性也会自动重新加载它。

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

另一个解决方案。

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


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

现在让这个工作在chrome 66，试试这个:

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

从Iframe内部重新加载

如果你的应用程序在Iframe中，你可以通过替换位置href来刷新它:

document.location.href = document.location.href
小开

我有一个问题，因为我没有使用超时给页面时间更新，我将src设置为“，然后将其设置回原来的url，但什么都没有发生:

function reload() {
document.getElementById('iframe').src = '';
document.getElementById('iframe').src = url;
}

但是它没有重新加载网站，因为它是单线程的，第一个改变不做任何事情，因为这个函数仍然占用线程，然后它设置回原来的url，我猜chrome不重新加载是因为性能或其他什么，所以你需要做:

function setBack() {
document.getElementById('iframe').src = url;
}
function reload() {
document.getElementById('iframe').src = '';
setTimeout(setBack,100);
}

如果setTimeout时间太短，它不工作，所以如果它不工作，尝试将它设置为500或其他东西，看看它是否工作。

这是在最新版本的chrome在写这篇文章的时候。


提交答案