it-swarm.com.de

Laden Sie einen iframe mit jQuery neu

Ich habe zwei Iframes auf einer Seite und einer nimmt Änderungen an der anderen vor, aber der andere Iframe zeigt die Änderungen nicht an, bis ich aktualisieren. 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>
137
Matt Elhotiby

Wenn sich der iframe nicht in einer anderen Domäne 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 durch die same-Origin-Richtlinie der Zugriff auf die contentDocument -Eigenschaft des iframe verweigert.

Sie können jedoch den domänenübergreifenden Iframe hackeraktuell zum Neuladen erzwingen, 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.

164
Alex
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
222
Šime Vidas

sie können auch Jquery verwenden. Dies ist dasselbe, was Alex nur mit JQuery vorgeschlagen hat:

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

Lade einen iframe mit jQuery neu

mache einen Link innerhalb des iframe, lass es uns mit id = "reload" sagen und dann folgenden Code verwenden

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

und Sie sind gut für alle Browser geeignet.

Einen iframe mit HTML neu laden (keine Java Script-Anforderung)

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

machen Sie einfach einen Anker in Ihrem I-Frame

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

Wenn Sie auf diesen Anker klicken, aktualisieren Sie einfach Ihren iframe

Aber Wenn Sie Parameter an Ihren iframe senden lassen, gehen Sie wie folgt vor.

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

sie brauchen keine Seiten-URL, weil -> target = "_ SELF" dies für Sie tut

9
user1008545

mit jquery kannst du folgendes verwenden:

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

Nur die Antwort von Alex erwidern, aber mit jQuery

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

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

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

Das sollte mit der aktuellen URL neu geladen werden.

3
Mark

Hier ist ein anderer Weg

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

Nur die Antwort von Alex mit jQuery erwidern:

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.

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

Wenn Sie domänenübergreifend sind, wird das erneute Zurücksetzen des src auf dieselbe URL nicht immer zu einem Neuladen führen, selbst wenn sich der Standort-Hash ändert.

Dieses Problem bestand beim manuellen Erstellen von Twitter-Button-iframes, die beim Aktualisieren der URLs nicht aktualisiert wurden.

Twitter wie Buttons haben die Form: .../Tweet_button.html#&_version=2&count=none&etc=...

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

Sie können einen Abfragezeichenfolge-Parameter anhängen, um das Neuladen zu erzwingen (zB: "?_=" + Math.random(), aber dies verschwendet 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 src ändern, warten, bis der Thread beendet ist, und es dann erneut zuweisen. Wenn die Seite noch zwischengespeichert ist, sollte dies keinen Netzwerktreffer erfordern, sondern das Frame-Reload auslösen.

 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 erneut. Dies bewirkt, dass die Schaltfläche back () wie erwartet funktioniert. Auch schön, den Timer nicht zu haben.

2
greg.kindel

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 eingestellt habe, und versucht daher nicht, die JavaScript-Funktion in iframe2 auszuführen, es sei denn, ich habe eine bestimmte Aktion in iframe1 ausgeführt. Sie können dies als eine Funktion einrichten, die durch einen Tastendruck ausgelöst wird, oder Sie möchten in iframe1.
  • Dann haben Sie in iframe2 die zweite Funktion, die ich unten aufliste. Die Funktion in iframe1 geht im Wesentlichen zur übergeordneten Seite und verwendet dann die window.frames-Syntax, um eine JavaScript-Funktion in iframe2 auszulösen. Stellen Sie nur sicher, dass Sie id/name von iframe2 und nicht src verwenden.
//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

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

Gelöst! Ich melde mich bei stockoverflow an, 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.

0
hubert17

du kannst es so machen

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });
0
aitbella
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

browserübergreifende Lösung ist:

    ifrX.src = ifrX.contentWindow.location

dies ist besonders nützlich, wenn <iframe> das Ziel eines <Formulars> ist

0
bortunac

// Alle iframes auf der Seite aktualisieren

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

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

Sie müssen verwenden 

[0] .src

um die Quelle des iframe und seine URL zu finden, muss es sich in derselben Domäne des übergeordneten Objekts befinden.

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