javascript - How to provide (in IE and Firefox) a binary file download in a popup that closes? - Stack Overflow

admin管理员组

文章数量:1417426

I need a cross-browser solution to the following use case: The user clicks an "export" button on one of our pages, which opens a popup with a form. On submitting the form, the user should receive a binary file download (a CSV file, for example), and the popup should close without changing the visible content of the parent window.

We can't use a timeout to close the popup, because there's typically a dialog asking the user how to handle the file before downloading it, and there's no way of knowing how long it will take the user to handle this dialog.

We originally had a script in the popup which sets window.location to the download file URL. That leaves the popup unclosed.

So then I tried putting a hidden iFrame in the parent window and having the popup set the iFrame's src to the download URL before calling self.close(). That works perfectly in Firefox, but IE pletely mangles it with security restrictions.

Is there a right way to do this ? How about a way that works on IE ?

---

Update - problem solved

The answers proposed here were not too far off, but my problem was a bit more plex than just being a Javascript issue. I encountered bugs with IE and Excel (since the download file is CSV), and the popup was doing a form post.

I could not solve the problem without appending the form data to a URL (for a GET instead of a POST), and I have to set the site as trusted in IE (this is an enterprise app, so that's a reasonable request to make of the users).

On the click of the form button, the popup calls a function on window.opener, passing in the form and its action URL. Then the popup calls window.close(). The function appends the form data to the URL and sets window.location to the new URL (the iFrame idea never worked well in IE and apparently was not necessary).

In the response to the form URL, the request headers include Content-Type: application/octetstream and Content-Disposition", "attachment; filename=filename.csv".

I need a cross-browser solution to the following use case: The user clicks an "export" button on one of our pages, which opens a popup with a form. On submitting the form, the user should receive a binary file download (a CSV file, for example), and the popup should close without changing the visible content of the parent window.

We can't use a timeout to close the popup, because there's typically a dialog asking the user how to handle the file before downloading it, and there's no way of knowing how long it will take the user to handle this dialog.

We originally had a script in the popup which sets window.location to the download file URL. That leaves the popup unclosed.

So then I tried putting a hidden iFrame in the parent window and having the popup set the iFrame's src to the download URL before calling self.close(). That works perfectly in Firefox, but IE pletely mangles it with security restrictions.

Is there a right way to do this ? How about a way that works on IE ?

---

Update - problem solved

The answers proposed here were not too far off, but my problem was a bit more plex than just being a Javascript issue. I encountered bugs with IE and Excel (since the download file is CSV), and the popup was doing a form post.

I could not solve the problem without appending the form data to a URL (for a GET instead of a POST), and I have to set the site as trusted in IE (this is an enterprise app, so that's a reasonable request to make of the users).

On the click of the form button, the popup calls a function on window.opener, passing in the form and its action URL. Then the popup calls window.close(). The function appends the form data to the URL and sets window.location to the new URL (the iFrame idea never worked well in IE and apparently was not necessary).

In the response to the form URL, the request headers include Content-Type: application/octetstream and Content-Disposition", "attachment; filename=filename.csv".

• javascript
• internet-explorer
• firefox
• popup
• download

Share Improve this question Follow edited May 19, 2009 at 13:16 aro_biz asked May 7, 2009 at 13:34 aro_bizaro_biz 13133 silver badges88 bronze badges 7

• would it work to either put the form on the original page or direct the new page to open in an iframe (which could be generated from script itself)? – Anonymous Commented May 7, 2009 at 14:08
• In response to Anonymous - I think what you're describing is sort of what I did. The popup, upon creation and initial loading, actually writes an invisible iFrame into the parent page. When the form is submitted in the popup, it directs the iFrame to load the download file. My IE (IE 6) blocked this and forced me to confirm the download in the parent window. On confirmation, it tries to resubmit the parent window form, which brings up another confirmation dialog and generally messes it up. – aro_biz Commented May 7, 2009 at 14:26
• I was thinking of submitting the form to an iframe, which gets rid of the lingering popup problem. – Anonymous Commented May 7, 2009 at 14:52
• 1 A suggestion: putting the form in a DHTML div (rather than a separate window) might simplify some of this: no cross-window scripting required, and your code can continue to run after you've "closed" the form. – joshng Commented May 7, 2009 at 17:13
• After trying lots of ideas, I think there's no getting around the default (medium) IE6 popup blocker, because the download is not initiated by user click. Unfortunately, that means I can't download in an IFrame in the opener, because IE6 reloads the whole opener when the user approves. Maybe I'll have to get our framework to stream the file directly (or via a forward) rather than generate a javascript request, but I'm not sure where that leaves me with closing the popup window. – aro_biz Commented May 11, 2009 at 16:03

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 1

Have you tried, in the iframe solution, to actually call a method inside the parent window, which in turn will set the location of the iframe? I'm asking because it worked in my tests:

Parent Window

<html>
<head>
<script type="text/javascript">
var w;

var download = function() {
    document.frames[0].location = "test.php";
    w.close();
};

var o = function() {
    w = window.open("test2.html", "window_name");
    return false;
};
</script>
</head>
<body>

<a href="#" onclick="return o();">open</a>

<iframe></iframe>

</body>
</html>

Popup window

<html>
<head>
<script type="text/javascript">
var download = function() {
    window.opener.download();
    return false;
};
</script>
</head>
<body>

<a href="#" onclick="return download();">download</a>

</body>
</html>

test.php is just a page that forces a file for download, and please note that the above code is IE specific as I'm using the document.frames object, but it can be easily made cross-browser.

This might be the a way to approach the problem.

1) Popup form onsubmit does a window.open to a third window that opens a page that is a blank page that just returns the downloaded file.

2) In your javascript on the popup form, right after you do the window.open, call your parent window (the 1st window) method that closes the popup submit form.

3) On the third page, which is just the page that returns the file, you the content-disposition in your header file to just return the file and nothing else, so the page won't really open.

Here is some info on the header you might need. The code is in Classic prehistoric ASP, but you should be able to gleam what you need.

http://classicasp.aspfaq./general/how-do-i-prompt-a-save-as-dialog-for-an-accepted-mime-type.html

Hope that helps.

There is not any perfect solution for it . When file download in IE its popup and in firefox it directely downloaded

本文标签： javascriptHow to provide (in IE and Firefox) a binary file download in a popup that closesStack Overflow