Was ist der beste Weg, um einen Iframe neu zu laden / zu aktualisieren?

Ich möchte ein <iframe>mit JavaScript neu laden . Der beste Weg, den ich bisher gefunden habe, war, das srcAttribut des Iframes auf sich selbst zu setzen, aber das ist nicht sehr sauber. Irgendwelche Ideen?

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

Seien Sie vorsichtig, in Firefox window.frames[]kann nicht nach ID, sondern nach Name oder Index indiziert werden

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

Es wird das iframeauch über Domains neu laden ! Getestet mit IE7 / 8, Firefox und Chrome.

Wenn Sie jQuery verwenden, scheint dies zu funktionieren:

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

Ich hoffe, es ist nicht zu hässlich für Stackoverflow.

Fügen Sie leeren Speicherplatz hinzu und laden Sie den iFrame automatisch neu.

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

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

Aufgrund derselben Ursprungsrichtlinie funktioniert dies nicht, wenn ein Iframe geändert wird, der auf eine andere Domäne verweist. Wenn Sie auf neuere Browser abzielen können, sollten Sie die dokumentübergreifende Nachrichtenübermittlung von HTML5 verwenden . Sie sehen die Browser, die diese Funktion unterstützen, hier: http://caniuse.com/#feat=x-doc-messaging .

Wenn Sie die HTML5-Funktionalität nicht verwenden können, können Sie die hier beschriebenen Tricks befolgen: http://softwareas.com/cross-domain-communication-with-iframes . Dieser Blogeintrag definiert das Problem auch gut.

Ich bin gerade auf Chrom gestoßen und das einzige, was funktioniert hat, war das Entfernen und Ersetzen des Iframes. Beispiel:

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

Ziemlich einfach, in den anderen Antworten nicht behandelt.

für neue URL

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

Die Methode assign () lädt ein neues Dokument.

neu laden

location.reload();

Die Methode reload () wird verwendet, um das aktuelle Dokument neu zu laden.

Das einfache Ersetzen des srcAttributs des iframe-Elements war in meinem Fall nicht zufriedenstellend, da der alte Inhalt angezeigt wird, bis die neue Seite geladen wird. Dies funktioniert besser, wenn Sie sofort visuelles Feedback geben möchten:

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

Eine Verfeinerung von Yajras Beitrag ... Ich mag den Gedanken, hasse aber die Idee der Browsererkennung.

Ich bin eher der Ansicht von ppk, die Objekterkennung anstelle der Browsererkennung zu verwenden ( http://www.quirksmode.org/js/support.html) ), weil Sie dann tatsächlich die Funktionen des Browsers testen und entsprechend handeln, anstatt Was Ihrer Meinung nach der Browser zu diesem Zeitpunkt kann. Erfordert auch nicht so viel hässliches Parsen von Browser-ID-Zeichenfolgen und schließt perfekt fähige Browser nicht aus, von denen Sie nichts wissen.

Also, anstatt auf navigator.AppName zu schauen, warum nicht so etwas tun und tatsächlich auf die Elemente testen, die Sie verwenden? (Sie könnten try {} -Blöcke verwenden, wenn Sie noch schicker werden möchten, aber das hat bei mir funktioniert.)

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!");
    }
}

Auf diese Weise können Sie so viele verschiedene Permutationen ausprobieren, wie Sie möchten oder erforderlich sind, ohne Javascript-Fehler zu verursachen, und etwas Sinnvolles tun, wenn alles andere fehlschlägt. Es ist etwas mehr Arbeit, Ihre Objekte zu testen, bevor Sie sie verwenden, aber IMO sorgt für besseren und ausfallsichereren Code.

Arbeitete für mich in IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) und Opera (12.0.2) unter Windows.

Vielleicht könnte ich es noch besser machen, indem ich tatsächlich die Reload-Funktion teste, aber das reicht mir jetzt. :) :)

Versuchen Sie Folgendes, damit dies auf Chrome 66 funktioniert:

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

In IE8 mit .Net ist iframe.srcdas erstmalige Einstellen von in Ordnung , aber iframe.srcdas zweite Einstellen page_loaddes wird die iframed-Seite nicht anheben . Um es zu lösen, habe ich verwendetiframe.contentDocument.location.href = "NewUrl.htm" .

Entdecken Sie es, wenn Sie jQuery thinBox verwenden und versuchen, dieselbe Seite im Thickbox-Iframe erneut zu öffnen. Dann wurde nur die frühere Seite angezeigt, die geöffnet wurde.

Verwenden Sie reload für IE und setzen Sie src für andere Browser. (Reload funktioniert nicht mit FF) getestet auf IE 7,8,9 und 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;
}

Wenn Sie Jquery verwenden, gibt es einen Zeilencode.

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

und wenn Sie mit demselben Elternteil arbeiten, dann

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

Wenn all das bei Ihnen nicht funktioniert:

window.location.reload();

Dies hat aus irgendeinem Grund meinen Iframe anstelle des gesamten Skripts aktualisiert. Vielleicht, weil es im Frame selbst platziert ist, während all diese getElemntById-Lösungen funktionieren, wenn Sie versuchen, einen Frame aus einem anderen Frame zu aktualisieren?

Oder ich verstehe das nicht ganz und spreche Kauderwelsch, sowieso hat das bei mir wie ein Zauber funktioniert :)

Haben Sie darüber nachgedacht, einen bedeutungslosen Abfragezeichenfolgenparameter an die URL anzuhängen?

<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>

Es wird nicht angezeigt und wenn Sie wissen, dass der Parameter sicher ist, sollte es in Ordnung sein.

Eine andere Lösung.

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

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

Mit self.location.reload()wird der Iframe neu geladen.

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

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

Wenn Sie alle anderen Vorschläge ausprobiert haben und keinen davon zum Laufen bringen konnten (wie ich es nicht konnte), können Sie Folgendes ausprobieren, das möglicherweise nützlich ist.

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

Ich wollte zunächst versuchen, mit RWD- und Cross-Browser-Tests Zeit zu sparen. Ich wollte eine kurze Seite erstellen, die eine Reihe von Iframes enthielt, die in Gruppen organisiert waren, die ich nach Belieben ein- und ausblenden würde. Logischerweise möchten Sie in der Lage sein, einen bestimmten Frame einfach und schnell zu aktualisieren.

Ich sollte beachten, dass das Projekt, an dem ich gerade arbeite, das in diesem Prüfstand verwendet wird, eine einseitige Site mit indizierten Speicherorten ist (z. B. index.html # home). Das mag etwas damit zu tun haben, warum ich keine der anderen Lösungen zum Aktualisieren meines speziellen Rahmens bekommen konnte.

Trotzdem weiß ich, dass es nicht das sauberste auf der Welt ist, aber es funktioniert für meine Zwecke. Hoffe das hilft jemandem. Wenn ich nur herausfinden könnte, wie ich verhindern kann, dass der Iframe jedes Mal, wenn sich eine Animation im Iframe befindet, die übergeordnete Seite scrollt ...

BEARBEITEN: Mir wurde klar, dass dies den Iframe nicht so "auffrischt", wie ich es mir erhofft hatte. Es wird jedoch die ursprüngliche Quelle des Iframes neu geladen. Ich kann immer noch nicht herausfinden, warum ich keine der anderen Optionen zum Laufen bringen konnte.

UPDATE: Der Grund, warum ich keine der anderen Methoden zum Laufen bringen konnte, ist, dass ich sie in Chrome getestet habe und Sie in Chrome nicht auf den Inhalt eines Iframes zugreifen können (Erläuterung: Ist es wahrscheinlich, dass zukünftige Versionen von Chrome contentWindow unterstützen? / contentDocument, wenn iFrame eine lokale HTML-Datei aus einer lokalen HTML-Datei lädt? ), wenn sie nicht vom selben Speicherort stammt (soweit ich das verstehe). Bei weiteren Tests kann ich auch in FF nicht auf contentWindow zugreifen.

GEÄNDERT 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);
    }
});

Zum Debuggen könnte man die Konsole öffnen und den Ausführungskontext in den Frame ändern, den er aktualisieren und ausführen möchte document.location.reload()