it-swarm.it

Qual è il modo migliore di ricaricare / aggiornare un iframe?

Vorrei ricaricare un <iframe> utilizzando JavaScript. Il modo migliore che ho trovato fino ad ora era impostare l'attributo src dell'iframe a se stesso, ma questo non è molto pulito. Qualche idea?

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

fai attenzione, in Firefox, window.frames[] non può essere indicizzato da id, ma per nome o indice

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

Ricaricherà iframe, anche attraverso i domini! Testato con IE7/8, Firefox e Chrome.

177
evko

Se si utilizza jQuery, sembra funzionare:

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

Spero che non sia troppo brutto per StackOverflow.

57
lousygarua
window.frames['frameNameOrIndex'].location.reload();
14
scunliffe

Aggiungi spazio vuoto anche ricaricare automaticamente iFrame.

document.getElementById('id').src += '';
12
Yohanes AI

A causa della stessa politica di origine , questo non funzionerà quando si modifica un iframe che punta a un dominio diverso. Se puoi scegliere come target i browser più recenti, valuta l'utilizzo di la messaggistica incrociata di HTML5 . Vedi i browser che supportano questa funzionalità qui: http://caniuse.com/#feat=x-doc-messaging .

Se non puoi utilizzare la funzionalità HTML5, puoi seguire i trucchi qui descritti: http://softwareas.com/cross-domain-communication-with-iframes . Quel post di blog fa anche un buon lavoro nel definire il problema.

8
big lep

Mi sono appena imbattuto in questo in chrome e l'unica cosa che ha funzionato è stata la rimozione e la sostituzione dell'iframe. Esempio:

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

Abbastanza semplice, non coperto nelle altre risposte.

4
Liam M

per nuovo URL

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

Il metodo assign () carica un nuovo documento.

ricaricare

location.reload();

Il metodo reload () viene utilizzato per ricaricare il documento corrente.

4
user2675617

Una raffinatezza sul post di yajra ... Mi piace il pensiero, ma odio l'idea del rilevamento del browser.

Prendo piuttosto la visione di ppk dell'utilizzo del rilevamento oggetti invece del rilevamento del browser, ( http://www.quirksmode.org/js/support.html ), perché in questo momento stai testando le funzionalità del browser e agendo di conseguenza, piuttosto che in base a quello che pensi che il browser sia in grado di fare in quel momento. Inoltre, non richiede un brutto parsing di stringhe ID del browser e non esclude browser perfettamente funzionanti di cui non si conosce nulla.

Quindi, invece di guardare navigator.AppName, perché non fare qualcosa del genere, in realtà testando gli elementi che usi? (Potresti usare try {} blocks se vuoi diventare ancora più elaborato, ma questo ha funzionato per me.)

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!");
    }
}

In questo modo, puoi provare tutte le permutazioni che desideri o sono necessarie, senza causare errori javascript, e fare qualcosa di sensato se tutto il resto fallisce. È un po 'più di lavoro per testare i tuoi oggetti prima di usarli, ma, IMO, rende il codice migliore e più sicuro.

Ha funzionato per me in IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) e Opera (12.0.2) su Windows.

Forse potrei fare ancora meglio testando effettivamente la funzione di ricarica, ma per ora è abbastanza per me. :)

3
Aaron Wallentine

La semplice sostituzione dell'attributo src dell'elemento iframe non era soddisfacente nel mio caso, perché si vedrebbe il vecchio contenuto fino a quando non viene caricata la nuova pagina. Funziona meglio se vuoi dare un feedback visivo istantaneo:

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

Usa ricarica per IE e imposta src per altri browser. (ricarica non funziona su FF) testato su IE 7,8,9 e 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;
}
2
yajra

Ora per fare questo lavoro su chrome 66, prova questo:

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

Se usi Jquery, allora c'è un codice di linea.

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

e se stai lavorando con lo stesso genitore allora

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

Hai considerato di accodare all'URL un parametro stringa di query senza senso?

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

Non sarà visto e se sei a conoscenza del fatto che il parametro è sicuro, allora dovrebbe andare bene.

2
user1212212

In IE8 usando .Net, impostare iframe.src per la prima volta è ok, ma impostare iframe.src per la seconda volta non aumenta il page_load della pagina iframed. Per risolverlo ho usato iframe.contentDocument.location.href = "NewUrl.htm".

Scoprilo quando usato jQuery thickBox e prova a riaprire la stessa pagina nell'iframe thickbox. Quindi ha appena mostrato la pagina precedente che è stata aperta.

2
Shaulian

Se tutto quanto sopra non funziona per te:

window.location.reload();

Questo per qualche motivo ha rinfrescato il mio iframe invece dell'intero script. Forse perché è inserito nel frame stesso, mentre tutte quelle soluzioni getElemntById funzionano quando si tenta di aggiornare un frame da un altro frame?

O non lo capisco completamente e parlo senza senso, comunque questo ha funzionato per me come un fascino :)

1
Marcin Janeczek

Usando self.location.reload() ricaricherai l'iframe.

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

Per scopi di debug si può aprire la console modificare il contesto di esecuzione nel frame che desidera aggiornare e fare document.location.reload()

0
h3dkandi

Se hai provato tutti gli altri suggerimenti e non hai potuto far funzionare nessuno di loro (come non potevo), ecco qualcosa che puoi provare che potrebbe essere utile.

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

Inizialmente ho deciso di provare a risparmiare un po 'di tempo con i test RWD e cross-browser. Volevo creare una pagina veloce che contenesse un gruppo di iframe, organizzati in gruppi che avrei mostrato/nascosto a volontà. Logicamente vorresti essere in grado di aggiornare facilmente e velocemente qualsiasi dato frame.

Devo notare che il progetto a cui sto lavorando attualmente, quello in uso in questo banco di prova, è un sito di una pagina con posizioni indicizzate (ad esempio index.html # home). Questo potrebbe aver avuto qualcosa a che fare con il motivo per cui non ho potuto ottenere nessuna delle altre soluzioni per aggiornare il mio particolare fotogramma.

Detto questo, so che non è la cosa più pulita del mondo, ma funziona per i miei scopi. Spero che questo aiuti qualcuno. Ora, se solo potessi capire come mantenere l'iframe dallo scrollare la pagina padre ogni volta che c'è l'animazione all'interno di iframe ...

EDIT: Mi sono reso conto che questo non "rinfresca" l'iframe come speravo sarebbe accaduto. Tuttavia ricaricherà la sorgente iniziale dell'iframe. Ancora non riesco a capire perché non ho potuto ottenere nessuna delle altre opzioni per funzionare ..

AGGIORNAMENTO: Il motivo per cui non sono riuscito a far funzionare gli altri metodi è perché li stavo testando in Chrome e Chrome non ti consente di accedere ai contenuti di un iframe ( Spiegazione: È probabile che le versioni future di Chrome supportano contentWindow/contentDocument quando iFrame carica un file html locale dal file html locale? ) se non lo fa provengono dalla stessa posizione (per quanto ho capito). Dopo ulteriori test, non posso accedere a contentWindow in FF.

JS modificato

$('.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);
    }
});
0
Todd
<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 
0
Sid

Un'altra soluzione.

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

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