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


当前回答

对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)工作过。

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

其他回答

对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)工作过。

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

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

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

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

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

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

window.location.reload();

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

或者我不完全理解这一点,说话胡言乱语,无论如何,这对我来说就像一个魅力:)

另一个解决方案。

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

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