Wie aktualisiere ich einen IFrame mit Javascript?

Antworten:

152
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
kjagiello
quelle
2
Es funktioniert für mich in dieser Version von Chrome:Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1)
Paul A Jungwirth
3
Zu Ihrer Information - Derzeit (Stand Januar 2013) liegt ein Chromium-Projektfehler ( code.google.com/p/chromium/issues/detail?id=172859 ) vor, der dazu führt, dass Iframe-Aktualisierungen zum Dokumentverlauf hinzugefügt werden.
Robert Altman
Wenn in iFrame die Seite geändert wird, hat diese Methode die Navigation verloren
Eduardo Cuomo
10
var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src;
Lyfing
2
Dies funktioniert perfekt für mich in Chromdocument.getElementById('frame_id').contentDocument.location.reload(true);
Haseeb Zulfiqar
104

Dies sollte helfen:

document.getElementById('FrameID').contentWindow.location.reload(true);

BEARBEITEN: Der Objektname wurde gemäß @ Joros Kommentar korrigiert.

nfechner
quelle
3
Dies funktioniert in IE9 nicht. Sie sollten stattdessen contentWindow contentDocument verwenden.
Gotqn
1
Danke für die Antwort. Wenn Sie eine Aktualisierung einer anderen Seite innerhalb des reload(true)document.getElementById('FrameID').contentWindow.location.replace(new_url);
Iframes
15
Dies funktioniert nicht mit Iframes mit unterschiedlichen Ursprüngen (Protokoll, Hostname oder Port).
michelpm
18

Vorausgesetzt, der Iframe wird von derselben Domain geladen, können Sie dies tun, was etwas sinnvoller ist:

iframe.contentWindow.location.reload();
Horia Dragomir
quelle
7

Funktioniert für IE, Mozzila, Chrome

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
Marek Pavelek
quelle
4

Sie können diese einfache Methode verwenden

function reloadFrame(iFrame) {

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

}
Vasile Alexandru Peste
quelle
2

Habe das von hier

var f = document.getElementById('iframe1');
f.src = f.src;
Amarghosh
quelle
Wenn in iFrame die Seite geändert wird, hat diese Methode die Navigation verloren
Eduardo Cuomo
2

2017:

Wenn es nur auf derselben Domain ist:

iframe.contentWindow.location.reload();

wird funktionieren.

pery mimon
quelle
1

Hier ist das HTML-Snippet:

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

Und mein Javascript-Code:

window.onload = function(){
setInterval(function(){
    parent.frames['idFrame'].location.href = "chat.txt";
},1000);}
Tony
quelle
1

Das src-Attribut direkt zurücksetzen:

iframe.src = iframe.src;

Zurücksetzen des src mit einem Zeitstempel für das Cache-Busting:

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

Löschen der Option src, wenn die Option Abfragezeichenfolgen nicht möglich ist (Daten-URI):

var wasSrc = iframe.src

iframe.onload = function() {
    iframe.onload = undefined;
    iframe.src = wasSrc;
}
lcharbon
quelle
1

Wenn Sie Hash-Pfade verwenden (wie mywebsite.com/#/my/url), die beim Wechseln des Hash möglicherweise keine Frames aktualisieren:

<script>
    window.onhashchange = function () {
        window.setTimeout(function () {
            let frame = document.getElementById('myFrame');
            if (frame !== null) {frame.replaceWith(frame);}
        }, 1000);
    }
</script>

Wenn Sie das Zeitlimit nicht verwenden, versucht JS möglicherweise, den Frame zu ersetzen, bevor die Seite den Inhalt vollständig geladen hat (und somit den alten Inhalt geladen hat). Ich bin mir der Problemumgehung noch nicht sicher.

NotoriousPyro
quelle
0

Wenn die Seite mehrere iFrames enthält, kann dieses Skript hilfreich sein. Ich gehe davon aus, dass die iFrame-Quelle einen bestimmten Wert enthält, mit dem der bestimmte iFrame gefunden werden kann.

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
    var source =  iframes[i].attributes.src.nodeValue;
    if(source.indexOf('/yourSorce') > -1){
        yourIframe = iframes[i];
    }   
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

Ersetzen Sie "/ yourSource" durch den gewünschten Wert.

sarvesh singh
quelle
0

Wenn sich die URL Ihres Iframes nicht ändert, können Sie sie einfach neu erstellen.

Wenn Ihr Iframe nicht denselben Ursprung hat (Protokollschema, Hostname und Port), können Sie die aktuelle URL im Iframe nicht kennen. Daher benötigen Sie ein Skript im Iframe-Dokument, um Nachrichten mit dem übergeordneten Fenster auszutauschen ( das Fenster der Seite).

Im iframe-Dokument:

window.addEventListener('change', function(e) {
  if (e.data === 'Please reload yourself') {
    var skipCache = true; // true === Shift+F5
    window.location.reload(skipCache);
  }
}

Auf Ihrer Seite:

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);
michelpm
quelle
-2

Sie können dies verwenden:

Js:

function refreshFrame(){
    $('#myFrame').attr('src', "http://blablab.com?v=");
}

Html:

`<iframe id="myFrame" src=""></iframe>`

JS Fiddle: https://jsfiddle.net/wpb20vzx/

Ferhat KOÇER
quelle
1
Die Frage hat nichts mit der beliebten JavaScript- Bibliothek jQuery zu tun .
John Weisz
Was würde Math.round () tun? Hier sieht es völlig nutzlos aus.
Davide R.
Hallo, ich habe Math.round () verwendet, da einige Browser die URL-Seite zwischenspeichern können, sodass die Aktualisierung nicht funktioniert.
Ferhat KOÇER