it-swarm.cn

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

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

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

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

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

它将重新加载iframe,甚至跨域!经过IE7/8,Firefox和Chrome测试。

172
evko

如果使用jQuery,这似乎工作:

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

我希望stackoverflow不会太难看。

57
lousygarua
window.frames['frameNameOrIndex'].location.reload();
14
scunliffe

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

document.getElementById('id').src += '';
12
Yohanes AI

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

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

7
big lep

我只是在chrome中遇到这种情况,唯一有效的方法就是删除并替换iframe。例:

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

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

4
Liam M

对于新网址

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

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

重装

location.reload();

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

4
user2675617

关于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)工作。

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

3
Aaron Wallentine

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

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

使用重新加载IE并为其他浏览器设置src。 (在IE 7,8,9和Firefox上测试(重装不适用于FF)

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;
}
2
yajra

现在要对chrome 66进行此操作,请尝试以下操作:

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

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

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

如果你和同一个父母一起工作的话

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

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

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

2
user1212212

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

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

2
Shaulian

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

window.location.reload();

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

或者我完全不理解这一点,并且谈论胡言乱语,反正这对我来说就像一个魅力:)

1
Marcin Janeczek

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

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

0
h3dkandi

如果你尝试了所有其他的建议,并且无法让它们中的任何一个起作用(就像我做不到的话),那么你可以尝试一些可能有用的东西。

_ 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滚动父页面...

编辑: 我意识到这不会像我希望的那样“刷新”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);
    }
});
0
Todd
<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 
0
Sid

另一种方法。

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

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