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


当前回答

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

如果你不能使用HTML5的功能,那么你可以遵循这里列出的技巧:http://softwareas.com/cross-domain-communication-with-iframes。该博客条目也很好地定义了问题。

其他回答

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

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

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

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

另一个解决方案。

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

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

新url

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

assign()方法加载一个新文档。

重新加载

location.reload();

reload()方法用于重新加载当前文档。

如果你使用Jquery,那么有一行代码。

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

如果你们是和同一个家长一起工作的话

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