views:

1527

answers:

4

Suppose we have the following HTML file:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

Now, if the URL to which iframe's src is being rewritten to (in this case - "http://example.com/dload.py") returns HTML, no problem: the onload event fires, the span's contents are replaced, everybody's happy.

However, if the content type of the file returned by the URL is set to something that forces the browser to open the save file dialog, the iframe's onload event never fires.

Is there any workaround? Using iframes isn't necessary, the desired behavior is to launch a callback after the browser begins downloading the supplied file.

A: 

You might need help of jquery for this, for instance you can do this:

$.get('http://example.com/dload.py',{},function(result){
   $('alert_span').html(result);//or some content
});
jerjer
No, this won't work. An asynchronous call will save the returned value into the result variable and pass it to the callback function, instead of opening a save dialog.
David Parunakian
+2  A: 

I have encountered the same problem as this: Here is my work-around, please see if it works for 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>

As far as I can remembered iframe's onload event fires only once. Setting another value for src attribute will not cause the onload event to fire again.

jerjer
Very clever! Thank you. It doesn't work in Chrome, but at least in Firefox it works, and works multiple times, since every time it's actually a new iframe that fires the onload event, since you overwrite innerHTML.
David Parunakian
I am glad it worked for you, I haven't tested it on Chrome though.
jerjer
This appeared to work for a similar issue that I had - as long as Firebug was running. When I tried in Firefox 2 or 3 without Firebug, all of a sudden the onload wouldn't fire. Anyone know where the difference is?
justkt
A: 

I have the same problem, onLoad handler is only fire when the content change. If you download a file. If you delete HTTP header to print file content on iframe, the onload is correctly fire.

Agence Web Wixiweb
A: 

The solution doesn't work if the target file in the iframe sends a header like "Content-Disposition: attachment; filename="file.png", because the content of the iframe then is not changed - only the browser's download window pops up.

Anyone got an idea how to handle that?

Paydor