Laden Sie einen Iframe mit jQuery neu

Ich habe zwei Iframes auf einer Seite und einer nimmt Änderungen am anderen vor, aber der andere Iframe zeigt die Änderung erst an, wenn ich sie aktualisiere. Gibt es eine einfache Möglichkeit, diesen Iframe mit jQuery zu aktualisieren?

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>

Wenn sich der Iframe nicht in einer anderen Domain befindet, können Sie Folgendes tun:

document.getElementById(FrameID).contentDocument.location.reload(true);

Da sich der Iframe jedoch in einer anderen Domäne befindet, wird Ihnen contentDocumentdurch die Richtlinie mit demselben Ursprung der Zugriff auf die Eigenschaft des Iframes verweigert .

Sie können den domänenübergreifenden Iframe jedoch hackig zum erneuten Laden zwingen, wenn Ihr Code auf der übergeordneten Seite des Iframes ausgeführt wird, indem Sie das src-Attribut auf sich selbst setzen. So was:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

Wenn Sie versuchen, den Iframe von einem anderen Iframe neu zu laden, haben Sie kein Glück, das ist nicht möglich.

$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

Sie können auch jquery verwenden. Dies ist das gleiche, was Alex vorgeschlagen hat, nur mit JQuery:

 $('#currentElement').attr("src", $('#currentElement').attr("src"));

Laden Sie einen Iframe mit jQuery neu

Machen Sie einen Link innerhalb des Iframes, sagen wir mit id = "reload", und verwenden Sie dann den folgenden Code

$('#reload').click(function() {
    document.location.reload();
});

und Sie können mit allen Browsern arbeiten.

Laden Sie einen Iframe mit HTML neu (keine Java Script-Anforderung).

Es hat eine einfachere Lösung: die funktioniert ohne JavaScript in (FF, Webkit)

Machen Sie einfach einen Anker inSide Ihrem Iframe

   <a href="#" target="_SELF">Refresh Comments</a>

Wenn Sie auf diesen Anker klicken, wird nur Ihr Iframe aktualisiert

Aber wenn Sie den Parameter send zu Ihrem iframe haben es dann tun , wie folgend.

  <a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>

brauche keine Seiten-URL, weil -> target = "_ SELF" es für dich tut

Mit jquery können Sie Folgendes verwenden:

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

Ich erwidere nur Alex 'Antwort, aber mit jQuery

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);

Hier ist ein anderer Weg

$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );

Ich bin mir ziemlich sicher, dass alle obigen Beispiele den Iframe nur mit seiner ursprünglichen src neu laden, nicht mit seiner aktuellen URL.

$('#frameId').attr('src', function () { return $(this).contents().get(0).location.href });

Das sollte mit der aktuellen URL neu geladen werden.

Wenn Sie domänenübergreifend sind, wird durch einfaches Zurücksetzen des src auf dieselbe URL nicht immer ein erneutes Laden ausgelöst, selbst wenn sich der Speicherort-Hash ändert.

Dieses Problem ist beim manuellen Erstellen von Twitter-Schaltflächen-Iframes aufgetreten, die beim Aktualisieren der URLs nicht aktualisiert wurden.

Twitter-ähnliche Schaltflächen haben die Form: .../tweet_button.html#&_version=2&count=none&etc=...

Da Twitter das Dokumentfragment für die URL verwendet, wurde beim Ändern des Hash / Fragments die Quelle nicht neu geladen, und die Schaltflächenziele spiegelten nicht meinen neuen, von Ajax geladenen Inhalt wider.

Sie können einen Abfragezeichenfolgenparameter anhängen, um das Neuladen zu erzwingen (z. "?_=" + Math.random() Dies verschwendet jedoch Bandbreite, insbesondere in diesem Beispiel, in dem der Ansatz von Twitter speziell versucht hat, das Caching zu aktivieren.

Um etwas neu zu laden, das sich nur mit Hash-Tags ändert, müssen Sie das Element entfernen oder das ändern src, warten, bis der Thread beendet ist, und ihn dann wieder zuweisen. Wenn die Seite noch zwischengespeichert ist, sollte dies keinen Netzwerktreffer erfordern, löst jedoch das erneute Laden des Frames aus.

 var old = iframe.src;
 iframe.src = '';
 setTimeout( function () {
    iframe.src = old;
 }, 0);

Update : Mit diesem Ansatz werden unerwünschte Verlaufselemente erstellt. Entfernen Sie stattdessen jedes Mal das iframe-Element und erstellen Sie es neu, damit diese Schaltfläche back () wie erwartet funktioniert. Auch schön, den Timer nicht zu haben.

Ich erwidere nur Alex 'Antwort, aber mit jQuery:

var e = $('#myFrame');
    e.attr("src", e.attr("src"));

Oder Sie können eine kleine Funktion verwenden:

function iframeRefresh(e) {
    var c = $(e);
        c.attr("src", c.attr("src"));
}

Ich hoffe, es hilft.

$('IFRAME#currentElement').get(0).contentDocument.location.reload()

Dies ist mit einfachem JavaScript möglich.

• Erstellen Sie in iFrame1 eine JavaScript-Funktion, die im Body-Tag onload aufgerufen wird. Ich habe eine serverseitige Variable überprüft, die ich festgelegt habe, daher wird nicht versucht, die JavaScript-Funktion in iframe2 auszuführen, es sei denn, ich habe in iframe1 eine bestimmte Aktion ausgeführt. Sie können dies als eine Funktion einrichten, die per Knopfdruck ausgelöst wird, oder wie Sie möchten, in iframe1.
• Dann haben Sie in iframe2 die zweite Funktion, die ich unten aufführe. Die Funktion in iframe1 wechselt grundsätzlich zur übergeordneten Seite und verwendet dann die window.framesSyntax, um eine JavaScript-Funktion in iframe2 auszulösen. Stellen Sie einfach sicher, dass Sie das id/ namevon iframe2 und nicht das verwenden src.

//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

//function in iframe2
function refreshPage()
{   
    document.location.reload();
}

// aktualisiere alle iframes auf der Seite

var f_list = document.getElementsByTagName('iframe');

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }

    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

Die browserübergreifende Lösung lautet:

    ifrX.src = ifrX.contentWindow.location

Dies ist besonders nützlich, wenn <iframe> das Ziel eines <form> ist

Gelöst! Ich registriere mich bei stockoverflow, um Ihnen die einzige Lösung (zumindest in ASP.NET/IE/FF/Chrome) mitzuteilen, die funktioniert! Die Idee ist, den innerHTML-Wert eines div durch seinen aktuellen innerHTML-Wert zu ersetzen.

Hier ist das HTML-Snippet:

<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME  runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless  ></IFRAME>
</div>

Und mein Javascript-Code:

function refreshGranite() {           
   var iframe = document.getElementById('divGranite')
   iframe.innerHTML = iframe.innerHTML;
}

Hoffe das hilft.

Sie müssen verwenden

[0] .src

Um die Quelle des Iframes und seine URL zu finden, muss er sich in derselben Domäne des übergeordneten Elements befinden.

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}

Sie können es so machen

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });

Die folgende Lösung wird sicher funktionieren:

window.parent.location.href = window.parent.location.href;