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


242

Vorrei ricaricare un <iframe>usando JavaScript. Il modo migliore che ho trovato fino ad ora è stato impostare l' srcattributo iframe su se stesso, ma questo non è molto pulito. Qualche idea?


4
C'è un motivo per cui impostare l' srcattributo su se stesso non è pulito? Sembra essere l'unica soluzione che funziona su tutti i browser e su tutti i domini
mirhagk,

L'impostazione srcdell'attributo su se stessa causa problemi se si dispone di un collegamento altrove destinato a <iframe>. Quindi la cornice mostrerà la pagina iniziale come originariamente progettato.
E. van Putten l'

Risposte:


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

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


26
In realtà, questo approccio non ha funzionato per me in Chrome. Non era presente la proprietà "contentWindow". Sebbene fosse possibile usare document.getElementById ('some_frame_id'). Location.reload (); Il metodo che ha funzionato sia per FF che per Chrome era document.getElementById ('iframeid'). Src = document.getElementById ('iframeid').
Src

1
@MikeBevz can location.reload è accessibile anche tramite il selettore Jquery?
Jitender Mahlawat,

2
assoluto è funzionante, ma bloccato con la stessa politica di origine del dominio == a
Bobby Stenly

6
frames[1].location.href.reload()e window.frames['some_frame_id'].location.href.reload()può anche essere usato
Daniël W. Crompton il

1
Se non riesci ad accedere alla finestra iframe, devi modificare l'attributo src del tag iframe.
Maciej Krawczyk,

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

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


68
document.getElementById('iframeid').src += '';funziona anche: jsfiddle.net/Daniel_Hug/dWm5k
Web_Designer,

3
E cosa fai esattamente se l'origine dell'iframe è cambiata da quando è stata aggiunta alla pagina?
Niet the Dark Absol,

Funziona per me su Chrome ver33! Strano che non possiamo semplicemente usare reloadma questo è permesso.
Luca

8
Nota che se iframe src ha un hash (es. http://example.com/#something), Questo non ricaricherà il frame. Ho usato l'approccio di aggiungere un parametro di query usa e getta come ?v2all'URL prima dell'hash.
user85461

Questo fa sì che l'iframe ritorni all'inizio.
Mr Tux,

60

Se si utilizza jQuery, questo sembra funzionare:

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

Spero non sia troppo brutto per StackOverflow.


6
Questo, senza jQuery: var iframe = document.getElementById("your_iframe"); iframe.src = src;
Seagrass

Si prega di notare a tutte le persone future che questa (e la semplice soluzione js) sono le migliori da usare, poiché è multipiattaforma e funziona su più domini.
mirhagk,

13
@Seagrass Penso che intendi:var iframe = document.getElementById("your_iframe"); iframe.src = iframe.src;
massimo

15

Aggiungi spazio vuoto e ricarica automaticamente iFrame.

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


8

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 browser più recenti, prendi in considerazione l'utilizzo della messaggistica tra documenti di HTML5 . Puoi visualizzare i browser che supportano questa funzione 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 sul blog fa anche un buon lavoro nel definire il problema.


7

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 trattato nelle altre risposte.


4

per il nuovo URL

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

Il metodo assegnato () carica un nuovo documento.

ricaricare

location.reload();

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


4

La semplice sostituzione srcdell'attributo dell'elemento iframe non è stata 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);

Ho appena testato lo stesso approccio ma senza setTimeout - e ha funzionato per me. in realtà, solo iframe.setAttribute ('src', iframe.getAttribute ('src'))
bonbonez,

3

Un perfezionamento sul post di Yajra ... Mi piace il pensiero, ma odio l'idea del rilevamento del browser.

Preferisco il parere di ppk sull'uso del rilevamento degli oggetti invece del rilevamento del browser, ( http://www.quirksmode.org/js/support.html ), perché poi stai effettivamente testando le capacità del browser e agendo di conseguenza, piuttosto che di cosa pensi sia capace il browser in quel momento. Inoltre, non richiede un così brutto analisi delle stringhe dell'ID browser e non esclude i browser perfettamente capaci di cui non sai nulla.

Quindi, invece di guardare navigator.AppName, perché non fare qualcosa del genere, testando effettivamente gli elementi che usi? (Puoi usare i blocchi try {} se vuoi diventare ancora più fantasioso, 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 diverse permutazioni che desideri o è necessario, 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 avrei potuto fare ancora meglio testando la funzione di ricarica, ma per me è abbastanza per ora. :)


3

Ora per farlo funzionare su Chrome 66, prova questo:

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

2

In IE8 usando .Net, l'impostazione iframe.srcper la prima volta è ok, ma l'impostazione iframe.srcper la seconda volta non aumenta la page_loadpagina iframed. Per risolverlo ho usatoiframe.contentDocument.location.href = "NewUrl.htm" .

Scoprilo quando viene utilizzato jQuery thickBox e ha tentato di riaprire la stessa pagina nell'iframe thickbox. Quindi mostrava solo la pagina precedente che era stata aperta.


2

Usa ricaricare per IE e impostare src per altri browser. (ricaricare non funziona su FF) testato su Internet Explorer 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

Se si utilizza Jquery, esiste un codice di riga.

$('#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'));

1

Se tutto quanto sopra non funziona per te:

window.location.reload();

Questo per qualche motivo ha aggiornato 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 ha funzionato per me come un incanto :)


1

Hai considerato di aggiungere all'URL un parametro di stringa di query senza significato?

<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 verrà visualizzato e se si è consapevoli che il parametro è sicuro, dovrebbe andare bene.


1

Un'altra soluzione.

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

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

Uno svantaggio di ciò è la modifica dell'albero DOM del documento radice e causerà una ridipingere. Ho usatovar url = ifr.src; ifr.src = null; ifr.src = url;
Pocketsand il

Penso che ricaricare un iframe causerà sempre una riverniciatura indipendentemente dal codice utilizzato.
Vasile Alexandru Peşte

1

L'utilizzo self.location.reload()ricaricherà 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
che ricarica l'intera finestra principale
pery mimon il

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

1
Non è la scelta che vorrei usare ma immagino che lo farebbe. Con qualche codice aggiuntivo che potresti aver aggiunto.
transilvlad

0

Se hai provato tutti gli altri suggerimenti e non sei riuscito a 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 RWD e test cross-browser. Volevo creare una rapida pagina che ospitasse un gruppo di iframe, organizzati in gruppi che avrei mostrato / nascosto a piacimento. Logicamente vorresti essere in grado di aggiornare facilmente e rapidamente 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 (es. Index.html # home). Ciò potrebbe aver avuto a che fare con il motivo per cui non sono riuscito a ottenere nessuna delle altre soluzioni per aggiornare il mio frame particolare.

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 impedire all'iframe di scorrere la pagina principale ogni volta che c'è animazione all'interno dell'iframe ...

MODIFICARE: Mi sono reso conto che questo non "aggiorna" l'iframe come speravo. Ricaricherà la fonte iniziale dell'iframe. Non riesco ancora a capire perché non riesco a far funzionare nessuna delle altre opzioni.

AGGIORNAMENTO: Il motivo per cui non sono riuscito a far funzionare nessuno degli altri metodi è perché li stavo testando in Chrome e Chrome non ti consentirà di accedere al contenuto di un iframe (Spiegazione: È probabile che le versioni future del contenuto di Chrome supportino Windows / contentDocument quando iFrame carica un file html locale dal file html locale? ) se non proviene dalla stessa posizione (per quanto ne capisco). Dopo ulteriori test, non riesco nemmeno ad 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

Ai fini del debug è possibile aprire la console per modificare il contesto di esecuzione nel frame che si desidera aggiornare e fare document.location.reload()

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.