Ricarica un iframe con jQuery

Ho due iframe su una pagina e uno apporta modifiche all'altra, ma l'altro iframe non mostra la modifica finché non aggiorno. C'è un modo semplice per aggiornare questo iframe con jQuery?

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

Se l'iframe non fosse su un dominio diverso, potresti fare qualcosa del genere:

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

Ma poiché l'iframe si trova su un dominio diverso, ti verrà negato l'accesso alla contentDocumentproprietà dell'iframe dalla stessa politica di origine .

Ma puoi forzare in modo hackerato l'iframe tra domini per ricaricare se il tuo codice è in esecuzione sulla pagina padre dell'iframe, impostando l'attributo src su se stesso. Come questo:

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

Se si sta tentando di ricaricare l'iframe da un altro iframe, siete fuori di fortuna, che è non è possibile.

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

puoi anche usare jquery. Questo è lo stesso che Alex ha proposto di usare solo JQuery:

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

Ricarica un iframe con jQuery

crea un collegamento all'interno dell'iframe diciamo con id = "ricaricare" quindi usa il seguente codice

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

e sei a posto con tutti i browser.

Ricarica un iframe con HTML (nessuna richiesta di script Java)

Ha una soluzione più semplice: che funziona senza javaScript in (FF, Webkit)

basta creare un'ancora all'interno del tuo iframe

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

Quando fai clic su questo ancoraggio, aggiorna semplicemente il tuo iframe

Ma se hai un parametro da inviare al tuo iframe, fallo come segue.

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

non è necessario alcun URL di pagina perché -> target = "_ SELF" lo fa per te

con jquery puoi usare questo:

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

Ricambiando la risposta di Alex ma con jQuery

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

Ecco un altro modo

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

Sono abbastanza sicuro che tutti gli esempi sopra riportati ricaricano solo l'iframe con il suo src originale, non l'URL corrente.

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

Ciò dovrebbe essere ricaricato utilizzando l'URL corrente.

Se sei interdominio, semplicemente reimpostando lo src sullo stesso url non si attiverà sempre una ricarica, anche se l'hash della posizione cambia.

Ho riscontrato questo problema durante la costruzione manuale degli iframe dei pulsanti di Twitter, che non si aggiornano quando ho aggiornato gli URL.

I pulsanti tipo Twitter hanno la forma: .../tweet_button.html#&_version=2&count=none&etc=...

Poiché Twitter utilizza il frammento di documento per l'URL, la modifica dell'hash / del frammento non ha ricaricato l'origine e le destinazioni dei pulsanti non riflettevano il mio nuovo contenuto caricato con ajax.

È possibile aggiungere un parametro della stringa di query per forzare la ricarica (ad esempio: "?_=" + Math.random() ma ciò sprecherà la larghezza di banda, specialmente in questo esempio in cui l'approccio di Twitter stava specificamente cercando di abilitare la memorizzazione nella cache.

Per ricaricare qualcosa che cambia solo con i tag hash, è necessario rimuovere l'elemento o modificare l'elemento src, attendere che il thread termini, quindi assegnarlo nuovamente. Se la pagina è ancora memorizzata nella cache, ciò non dovrebbe richiedere un hit di rete, ma attiva il ricaricamento del frame.

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

Aggiornamento : l'utilizzo di questo approccio crea elementi di cronologia indesiderati. Invece, rimuovi e ricrea ogni volta l'elemento iframe, che mantiene questo pulsante back () funzionante come previsto. Bello anche non avere il timer.

Ricambiando la risposta di Alex ma con jQuery:

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

Oppure puoi usare una piccola funzione:

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

Spero possa essere d'aiuto.

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

Questo è possibile con un semplice JavaScript.

• In iFrame1, crea una funzione JavaScript chiamata nel caricamento del tag body. Devo controllare una variabile lato server che ho impostato, quindi non tenta di eseguire la funzione JavaScript in iframe2 a meno che non abbia intrapreso un'azione specifica in iframe1. Puoi impostarlo come una funzione attivata dalla pressione di un pulsante o come vuoi in iframe1.
• Quindi in iframe2, hai la seconda funzione che ho elencato di seguito. La funzione in iframe1 passa sostanzialmente alla pagina principale e quindi utilizza la window.framessintassi per attivare una funzione JavaScript in iframe2. Assicurati di usare id/ nameof iframe2 e non il file src.

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

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

// aggiorna tutti gli iframe sulla pagina

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'];

la soluzione cross-browser è:

    ifrX.src = ifrX.contentWindow.location

questo è utile soprattutto quando <iframe> è il bersaglio di un <form>

Risolto! Mi registro a stockoverflow solo per condividere con te l'unica soluzione (almeno in ASP.NET/IE/FF/Chrome) che funziona! L'idea è di sostituire il valore innerHTML di un div con il suo valore innerHTML corrente.

Ecco lo snippet HTML:

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

E il mio codice Javascript:

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

Spero che questo ti aiuti.

Devi usare

[0] .src

per trovare l'origine dell'iframe e il suo URL deve trovarsi nello stesso dominio del genitore.

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

puoi farlo in questo modo

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

Di seguito la soluzione funzionerà sicuramente:

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