2009-10-06 12 views
10

Supponiamo di avere il seguente file HTML:Come attivare l'evento onload durante il download di un file in un iframe?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test iframe download</title> 
<script type="text/javascript"> 

var init = 0; 

function download() { 
    document.getElementById("dload_frame").src = "http://example.com/dload.py"; 
} 

function alert() { 
    if (init == 0) { 
    init = 1; 
    } 
    else { 
    document.getElementById("alert_span").innerHTML = "Got it!"; 
    } 
} 

</script> 
</head> 
<body> 

    <span id="alert_span">Main content.</span><br/> 
    <input type="button" value="Download" id="btn" onclick="download()" /> 
    <iframe id="dload_frame" src="http://404.com/404" onload="alert()"> </iframe> 

</body> 
</html> 

Ora, se l'URL al quale iframe di src viene riscritto per (in questo caso - "http://example.com/dload.py") restituisce HTML, nessun problema: l'evento onload, i contenuti dello span sono sostituiti, tutti sono felici.

Tuttavia, se il tipo di contenuto del file restituito dall'URL è impostato su qualcosa che forza il browser ad aprire la finestra di dialogo di salvataggio, l'evento onload dell'iframe non viene mai attivato.

C'è qualche soluzione? L'utilizzo degli iframe non è necessario, il comportamento desiderato è avviare una richiamata dopo che il browser ha iniziato a scaricare il file fornito.

+0

È possibile provare a recuperare il file utilizzando ajax e quindi creare il tag 'a' (collegamento) con l'URI dei dati e fare clic su di esso, ma non l'ho verificato con file di grandi dimensioni. – jcubic

risposta

1

ho incontrato lo stesso problema come questo: Qui è il mio lavoro-around, vedere se funziona per you:

<script> 
function download(){ 
    var url = 'http://example.com/dload.py'; 
    var htm = '<iframe src="' + url +'" onload="downloadComplete()"></iframe>'; 
    document.getElementById('frameDiv').innerHTML = htm; 
} 
</script> 

<div style="display:none" id="frameDiv"> 
</div> 
<button onclick="download()">download file</button> 

Per quanto posso ricordare, l'evento onload di iframe si attiva solo una volta. L'impostazione di un altro valore per l'attributo src non provocherà l'attivazione dell'evento onload.

+0

Molto intelligente! Grazie. Non funziona in Chrome, ma almeno in Firefox funziona e funziona più volte, poiché ogni volta è in realtà un nuovo iframe che attiva l'evento onload, poiché sovrascrivi innerHTML. – dpq

+0

Sono contento che abbia funzionato per te, non l'ho ancora testato su Chrome. – jerjer

+0

Questo sembra funzionare per un problema simile che ho avuto - fino a quando Firebug era in esecuzione. Quando ho provato in Firefox 2 o 3 senza Firebug, all'improvviso l'onload non sparava.Qualcuno sa dov'è la differenza? – justkt

-1

Potrebbe essere necessario l'aiuto di jQuery per questo, per esempio, si può fare questo:

$.get('http://example.com/dload.py',{},function(result){ 
    $('alert_span').html(result);//or some content 
}); 
+3

No, questo non funzionerà. Una chiamata asincrona salverà il valore restituito nella variabile risultato e lo passerà alla funzione di callback, invece di aprire una finestra di dialogo di salvataggio. – dpq

0

Ho lo stesso problema, il gestore onLoad è attivo solo quando il contenuto cambia. Se si scarica un file. Se si elimina l'intestazione HTTP per stampare il contenuto del file su iframe, l'onload è attivato correttamente.

+1

Come posso eliminare le intestazioni HTTP ed essere in grado di scaricare il file nel browser web? – anmarti

1

La mia soluzione dopo molti approcci diversi per ottenere questo funzionamento su ff ie safari e chrome non ha avuto un download in 2 fasi.

la richiesta JS originale per creare un iframe carica un src che normalmente avrebbe caricato il pdf Tuttavia, lo src ora carica una pagina con un altro iframe al suo interno, che ora contiene l'url del pdf. nella risposta HTML faccio scattare l'onload e anche una funzione setTimeout di tipo catchall che chiama la mia risposta su window.parent.window.handlerfunction che il mio onload sull'iframe superiore sarebbe stato. Il risultato è un download PDF e un trigger sul genitore di livello superiore della funzione di gestione che funziona attraverso i browser poiché non si basa più sul rilevamento di un carico iframe effettivo, ma piuttosto su relazioni finestra padre/figlio supportate.

speranza che questo aiuta qualcuno che è stato anche bloccato

0

È possibile controllare proprietà iframe readyState ripetutamente dopo brevi intervalli di tempo fino a quando non si completa.

function iframe_onload(iframe_id, js) { 
    var iframe = document.getElementById(iframe_id); 
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; 

    if (iframeDoc.readyState == 'complete') { 
     eval(js) 
     return; 
    } 

    window.setTimeout('iframe_onload("' + iframe_id + '",`' + js + '`);', 100); 
} 
+0

Ho il download di base php e dopo averlo scaricato, i dati vengono inviati al browser e lo stato è contrassegnato come completo anche se il download è ancora in corso. – jcubic

Problemi correlati