使用iframe下载文件

Question

Currently, I'm downloading the file using POST form:

var form = document.createElement("form");
var element1 = document.createElement("input");
var element2 = document.createElement("input");

form.target = "_blank";
form.method = "POST";
form.action = path;

element1.value = authService.getToken();
element1.name = "Authorization";
form.appendChild(element1);

element.append(form);

form.submit();
element.empty();

In order to prevent current page's location change when the server doesn't send correct headers, I open set the form's target to "_blank", so that if an error occurs it is shown on the other page. But the problem here is that browsers block new tabs by default, and I don't want to force users to allow such behaviour. I've read that also there an option to specify iframe's id as a target. Is it going to work in my case? How can I then read an error from the iframe to show to a user?

Answer 1

I am working on this very problem right now. The best answer I've found for returning state from the iframe is to set a cookie in it. The cookie's name should ideally be unique to the particular download event (I'm using a guid), known to both pages, and its value can be an error message or empty for success. The parent page then polls for this cookie in javascript. I make sure that the download url always renders the cookie if there's an error, because it's hard to learn anything else about the state of the iframe. On success, the JS poller can hide a ”your download will begin shortly" message, and delete the cookie. On failure, do those and also show the error.

The big unanswered question is how well it'll work in mobile browsers. Popups are a terrible choice with them because they mostly default to blocking them with no prompt... but nevertheless there's a jQuery plugin out there for iframe downloads which, when it sees mobile, falls back to popups. That scares me.