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

Question

Ich möchte ein <iframe> mit JavaScript neu zu laden. Der beste Weg, die ich bis jetzt gefunden wurde, der iframe ist src Attribut auf sich selbst, aber das ist nicht sehr sauber. Irgendwelche Ideen?

Answer 1

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

vorsichtig sein, in Firefox, window.frames[] kann nicht von id indiziert werden, aber nach Namen oder Index

Answer 2

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

Es wird die iframe, auch über mehrere Domains neu laden! Getestet mit IE7 / 8, Firefox und Chrome.

Answer 3

jQuery Bei Verwendung dieses scheint zu funktionieren:

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

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

Answer 4

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

Answer 5

leeren Raum auch noch die iFrame nachladen automatisch.

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

Answer 6

Aufgrund der rel="noreferrer">, das wird nicht funktionieren, wenn ein iframe Modifikation zeigt auf eine andere Domain. Wenn Sie neueren Browser ausrichten können, sollen Sie mit HTML5 Cross -Dokument Messaging . Sie sehen den Browser, das diese Funktion hier unterstützen: http://caniuse.com/#feat=x -doc-Messaging .

Wenn Sie nicht HTML5-Funktionalität nutzen können, dann können Sie die Tricks hier wie folgt vor: http://softwareas.com/cross-domain-communication-with-iframes . Der Blog-Eintrag macht auch einen guten Job, das Problem zu definieren.

Answer 7

Ich komme gerade gegen diese in Chrom und das einzige, was gearbeitet wurde entfernt und die iframe zu ersetzen. Beispiel:

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

Ganz einfach, nicht in den anderen Antworten abgedeckt.

Answer 8

für neue URL

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

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

reload

location.reload();

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

Answer 9

Eine Verfeinerung yajra der Post ... Ich mag den Gedanken, aber hasse die Vorstellung von Browser-Erkennung.

ich eher ppk Sicht des nehmen Objekterkennung statt Browser-Erkennung verwendet wird, ( http://www.quirksmode.org/js/support.html ), denn dann sind Sie tatsächlich die Fähigkeiten des Browsers zu testen und dementsprechend eher als das, was Sie denken, der Browser ist in der Lage zu dieser Zeit wirken. nicht auch so viel hässlich Browser-ID-String-Parsing erforderlich ist, und schließt nicht perfekt fähigen Browser, von denen Ihnen nichts wissen.

Also, statt auf navigator.AppName suchen, warum so etwas wie dies nicht tun, Prüfung tatsächlich für die Elemente, die Sie verwenden? (Sie könnten versuchen, verwenden {} Blöcke, wenn Sie auch ausgefallenere erhalten möchten, aber das funktionierte für mich.)

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 gehen versuchen, wie Sie mögen oder notwendig ist, ohne JavaScript-Fehler zu verursachen, und etwas tun, sinnvoll, wenn alles andere fehlschlägt. Es ist ein wenig mehr Arbeit für Ihre Objekte zu testen, bevor sie verwendet wird, aber IMO, für eine bessere und Failsafe-Code macht.

Für mich arbeitet in IE8, Firefox (15.0.1), Chrom (21.0.1180.89 m) und Opera (12.0.2) unter Windows.

Vielleicht könnte ich besser machen sogar tatsächlich für die Reload-Funktion zu testen, aber das ist genug für mich jetzt. :)

Answer 10

Sie einfach das src Attribut des iframe Elements ersetzt war in meinem Fall nicht zufrieden stellend, da man den alten Inhalt sehen würde, bis die neue Seite geladen wird. Das funktioniert besser, wenn Sie sofortige visuelle Rückmeldung geben mögen:

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

Answer 11

In IE8 .NET, die iframe.src zum ersten Mal Einstellung ist in Ordnung, aber die iframe.src zum zweiten Mal Einstellung Anheben nicht die page_load der IFramed Seite. Um es zu lösen i verwendet iframe.contentDocument.location.href = "NewUrl.htm".

es entdecken, wenn jQuery Thickbox verwendet und versucht, gleiche Seite in der thickbox iframe wieder zu öffnen. Dann zeigte sie nur die frühere Seite, die geöffnet wurde.

Answer 12

Verwenden reload für IE und setzte src für anderen Browser. (Neu laden 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;
}

Answer 13

Haben Sie an die URL angehängt betrachteten einen sinnlosen Query-String-Parameter?

<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 zu sehen und wenn Sie sich der Parameter sind sicher zu sein, dann sollte es in Ordnung sein.

Answer 14

Wenn Sie Jquery verwenden, dann gibt es eine Zeile Code.

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

und wenn Sie arbeiten mit dem gleichen Elternteil dann

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

Answer 15

Nun, diese Arbeit auf 66 Chrom zu machen, versuchen Sie dies:

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

Answer 16

Wenn alle der oben genannten nicht für Sie arbeiten:

window.location.reload();

Das aus irgendeinem Grund aktualisiert meine iframe anstelle des gesamten Skript. Vielleicht, weil es in dem Rahmen gelegt wird selbst, während alle jene getElemntById Lösungen arbeiten, wenn Sie versuchen, einen Rahmen von einem anderen Rahmen zu aktualisieren?

Oder verstehe ich das nicht voll und Kauderwelsch reden, sowieso das ist für mich wie ein Zauber:)

Answer 17

self.location.reload() verwendet, wird der iframe neu zu laden.

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

Answer 18

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

Answer 19

Wenn Sie alle anderen Vorschläge versucht, und konnte nicht von ihnen zu arbeiten (wie konnte ich nicht), hier ist etwas, das Sie versuchen können, das kann nützlich sein.

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 habe zunächst aus, um zu versuchen und einige Zeit mit RWD und Cross-Browser-Test zu speichern. Ich wollte eine schnelle Seite erstellen, die eine Reihe von iframes untergebracht ist, in Gruppen organisiert, die ich / auszublenden nach Belieben zeigen würde. Logischerweise können Sie wollen würde sein, um einfach und schnell jeden gegebenen Rahmen aktualisieren.

Ich soll anmerken, dass das Projekt Zur Zeit arbeite ich an, die man bei der Verwendung in diesem Test-Bett, ist eine Ein-Seiten-Website mit indizierten Orten (zum Beispiel index.html # home). Das mag etwas gehabt haben, mit dem zu tun, warum ich nicht eine der anderen Lösungen bekommen könnte meinen besonderen Rahmen zu aktualisieren.

Having said that, ich weiß, es ist nicht die sauberste Sache der Welt, aber es funktioniert für meine Zwecke. Hoffe, dass dies jemand hilft. Nun, wenn ich nur könnte herausfinden, wie die iframe, um zu verhindern Scrollen die übergeordnete Seite jedes Mal gibt es Animation innerhalb iframe ...

EDIT: Ich erkannte, dass dies nicht „refresh“ die iframe, wie ich gehofft hatte, es würde. Es wird jedoch die iframe anfängliche Quelle neu zu laden. Dennoch kann nicht herausfinden, warum ich nicht die anderen Optionen erhalten könnte zu arbeiten ..

UPDATE: Der Grund, warum ich nicht eine der anderen Methoden erhalten könnte, ist zu arbeiten, weil ich sie in Chrome teste und Chrome wird nicht zulassen, dass Sie ein iframe Inhalt zuzugreifen (Erklärung: ist es wahrscheinlich, dass zukünftige Versionen von Chrome Unterstützung contentWindow / contentdocument wenn iFrame eine lokale hTML lädt Datei von der lokalen hTML-Datei? ), wenn sie nicht von der gleichen Stelle hat ihren Ursprung (soweit ich es verstehe). Bei der weiteren Prüfung kann ich nicht contentWindow in FF entweder zugreifen zu können.

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

Answer 20

Für Debug-Zwecke könnte man die Konsole öffnet den Ausführungskontext auf den Rahmen ändern, dass er aufgefrischt will und tun document.location.reload()

Answer 21

Eine andere Lösung.

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

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