it-swarm-eu.dev

Wie kann ein iframe am besten neu geladen / aktualisiert werden?

Ich möchte einen <iframe> Mit JavaScript neu laden. Der beste Weg, den ich bis jetzt gefunden habe, war, das iframe-Attribut src auf sich selbst zu setzen, aber das ist nicht sehr sauber. Irgendwelche Ideen?

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

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

Es wird das iframe auch domänenübergreifend neu laden! Getestet mit IE7/8, Firefox und Chrome.

180
evko

Bei Verwendung von jQuery scheint dies zu funktionieren:

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

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

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

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

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

Aufgrund der same Origin policy funktioniert dies nicht, wenn ein iframe geändert wird, der auf eine andere Domain verweist. Wenn Sie auf neuere Browser abzielen können, sollten Sie Cross-Document Messaging in HTML5 verwenden. Die Browser, die diese Funktion unterstützen, finden Sie 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 Blog-Eintrag macht auch einen guten Job bei der Definition des Problems.

8
big lep

Ich bin gerade in chrome darauf 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, wird in den anderen Antworten nicht behandelt.

6
Liam M

Das einfache Ersetzen des src -Attributs des iframe-Elements war in meinem Fall nicht zufriedenstellend, da der alte Inhalt angezeigt wurde, bis die neue Seite geladen wurde. 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);
4
Patrick Rudolph

für neue URL

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

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

neu laden

location.reload();

Mit der reload () -Methode wird das aktuelle Dokument neu geladen.

4
user2675617

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

Ich bin eher der Ansicht, dass ppk die Objekterkennung anstelle der Browsererkennung verwendet ( http://www.quirksmode.org/js/support.html ), weil Sie dann tatsächlich die Funktionen der testen Browser und entsprechend zu handeln, anstatt zu dem, was Sie denken, dass der Browser zu diesem Zeitpunkt in der Lage ist. Erfordert auch nicht so viel hässliches Parsing von Browser-ID-Zeichenfolgen und schließt keine perfekt fähigen Browser aus, von denen Sie nichts wissen.

Also, anstatt auf navigator.AppName zu schauen, warum nicht so etwas tun und tatsächlich nach den Elementen suchen, die Sie verwenden? (Sie könnten try {} -Blöcke verwenden, wenn Sie noch ausgefallener 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 Vernünftiges tun, wenn alles andere fehlschlägt. Es ist ein bisschen 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 sogar noch besser machen, indem ich tatsächlich auf die Nachladefunktion teste, aber das reicht mir im Moment. :)

3

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
    })
}
3
Northern

Verwende reload für IE und setze src für andere Browser. (Reload funktioniert nicht auf 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;
}
2
yajra

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

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

Haben Sie darüber nachgedacht, an die URL einen bedeutungslosen Abfragezeichenfolgenparameter 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 gesehen und wenn Sie wissen, dass der Parameter sicher ist, sollte es in Ordnung sein.

2
user1212212

Stellen Sie in IE8 unter Verwendung von .Net das iframe.src zum ersten Mal ist in Ordnung, aber das Einstellen der iframe.src zum zweiten Mal erhöht nicht die page_load der iframed Seite. Um es zu lösen, habe ich iframe.contentDocument.location.href = "NewUrl.htm".

Entdecken Sie es, wenn Sie jQuery thickBox verwenden und versuchen, dieselbe Seite im Thickbox iframe erneut zu öffnen. Dann zeigte es nur die frühere Seite, die geöffnet wurde.

2
Shaulian

Wenn all das bei Ihnen nicht funktioniert:

window.location.reload();

Dadurch wurde aus irgendeinem Grund mein 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 rede Kauderwelsch, sowieso hat das für mich wie ein Zauber geklappt :)

1
Marcin Janeczek

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

Zu Debugging-Zwecken kann man die Konsole öffnen und den Ausführungskontext in den Frame ändern, den er aktualisieren möchte, und document.location.reload() ausführen.

0
h3dkandi

Wenn Sie alle anderen Vorschläge ausprobiert haben und keinen davon zum Laufen bringen konnten (wie ich es nicht konnte), können Sie Folgendes versuchen, 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);
});

Zunächst wollte ich versuchen, mit RWD- und Cross-Browser-Tests etwas 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 wollte. 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 Testfeld verwendete, eine einseitige Site mit indizierten Speicherorten ist (z. B. index.html # home). Das mag etwas damit zu tun haben, dass ich keine der anderen Lösungen bekommen konnte, um meinen speziellen Rahmen aufzufrischen.

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 die übergeordnete Seite jedes Mal rollt, wenn sich in Iframe eine Animation befindet ...

EDIT: Ich habe festgestellt, dass der Iframe dadurch nicht so "aktualisiert" wird, wie ich es mir erhofft hatte. Es wird jedoch die ursprüngliche Quelle des Iframes neu laden. 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 Chrome können Sie nicht auf den Inhalt eines iFrames zugreifen. (Erläuterung: Wird in zukünftigen Versionen von Chrome contentWindow/contentDocument wahrscheinlich unterstützt, wenn iFrame eine lokale HTML-Datei von lädt?) Lokale HTML-Datei? ) Wenn sie nicht vom selben Speicherort stammt (soweit ich das verstehe). Nach weiteren Tests kann ich auch in FF nicht auf contentWindow zugreifen.

AMENDED 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

Eine andere Lösung.

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

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