Initiating a download with javascript - javascript

I need to dynamically initiate a download with javascript. I have seen how people do this by doing something like
window.open("some url", "Download");
but I need to do it without changing the url of the current page (and not using frames if I can help it, or created and destroying a frame dynamically). Anybody know how to do this?

You don't need window.open(). It's plain ugly and prone to popupblockers (where you have no control over in clients). Just window.location is sufficient if the response header of the requested download URL contains Content-Disposition: attachment. This won't change the current URL in the browser address bar nor the current page, but just pop a Save As dialogue.
E.g.
window.location = 'http://download.winzip.com/winzip145.exe';

Related

Is possible to read script tag src URL content using JavaScript/jQuery

Please guide me. Is possible to read script tag src URL content using JavaScript/jQuery. Please don't suggest JSON/Ajax/iframe options.
I have tried like
<script src="http://www.test.com" id="test">
document.getElementById('test').src
but it give only src URL.
My Exact requirements is,
I have two application, each in different web server with www.siteA.com and www.siteB.com.
In Server2, I have cross origin and iframe restriction to access the application. Example: If a request is coming from server1(siteA) to server2(siteB) via Ajax or iframe, it's restricted to access the siteB page content. But If I load siteB in script tag it's loaded, but I'm not able to get the content.
So I mentioned above, don't suggest iframe and Ajax. Help me to achieve this.
The best way really is AJAX, but it does sound like CORS is an issue for you. The only other option I can think of would be to open the page in a new browser window, although I don't know what kind of user experience implications that will have on your application.
You can open a new browser window by:
function showContent(){
var url = document.getElementById("test").src;
window.open(url, "_blank");
}
Although if you take this route, you shouldn't put the url on a script tag, because the browser will download it once (via the script tag), and then a second time on the window.open.

Standard way of doing a "thanks_for_downloading.html" + "Save file..." after a link?

Let's look at FireFox.
They have a nice big Call To Action button: "Firefox 3.6 - Free Download"
You click that, it links you to a new page: "Thanks for downloading Firefox! Your download should begin in a few seconds."
Then a few seconds later up pops: "FIREFOX.exe - Do you want to save or discard this file?"
This is pretty standard download behavior for applications accross the web. How is it done, in the simplest way?
There are two parts to this:
Forcing the browser to download the file, rather than trying to display it (with .exe that's no problem, but you might want to do it with an image, movie, or HTML file too).
Prompting the browser to download the file.
Let's pretend we just want the browser to download a file, without wanting to change the page. We can create a link like this, and it'll work as expected:
Download File
Your browser probably doesn't know how to handle a zip file, so it downloads "download.zip" straight to a file named after the filename in the URL. If you wanted to download a JPG instead, though, this wouldn't work:
Save this Sunset!
Your browser knows how to display a JPEG, so it redirects the page and shows the JPEG. Now we need to tell the browser not to show it, but to download it instead. To do that, we have to send it some specific HTTP headers in the response from the server.
Apache can handle this by specifying headers in .htaccess, but I'll stay away from a particular technology, opting to just talk about the mechanism.
So we send the following header to the browser along with the image:
Content-disposition: attachment; filename=the_sunset_of_a_lifetime.jpg;
The first header, content-disposition, tells your browser that we want the file to be an attachment, or in other words, it should be saved, not displayed. The filename attribute tells it the name to use to save the file (rather than "sunset.jpg", the file will be named "the_sunset_of_a_lifetime.jpg").
Now the link to download the "sunset.jpg" file works like we want. But how do we get the browser to download it without the user clicking on the link so we can show a "Thank You" page and prompt the download to start? A simple <meta> tag can do the trick, telling the browser to redirect the page after a set period of time:
<meta http-equiv="refresh" content="2;url=/images/sunset.jpg">
When your "thank you" page loads with that meta tag in the head, it'll wait for 2 seconds and then try to load the image. It'll get the headers we set in the last step, and download it instead of displaying it, and the user will stay put on the page like we want.
Example content of thanks_for_downloading.html:
<strong>Thanks for downloading XY</strong>
<script type="text/javascript">
window.onload = function(){
window.location.href = "path/to/XY.exe";
};
</script>
The Download-link is just a link to the thanks_for_downloading.html page
The call to action button is a regular link to the "Thank you" page. Then on the "Thank you" page, use javascript to redirect the user to the file you are downloading by setting the "window.location" property to the file's URL.

Prompting for download

Whats the best method to prompt a user to download something? In the past I've used window.open('file.pdf'); but I can see popup blockers having a problem with this. Of course I'll include a manual link aswel.
I basically want something like the Microsoft Download page. So whats the script that prompts this?
Redirect using javascript.
function redirect() {
window.location = 'http://www.url.to/your.file';
}
Content-Disposition: attachment; filename="file.pdf"
To do this you may want to pass your file.pdf through a server script that forces that header on it.
What you see on that download page is just a location change. And if that page returns the download header the browser won't change page.
Set a content disposition header with an attachment value

Using Javascript to send an HTTP attachment to the user (open browser's Save as... dialog)

I'm new to web development, so I apologize if this question is noobish. I want to serve a file that is on the server's hard drive to the user when requested (ie, send an HTTP attachment to trigger the browser's "Save as..." dialog) in Javascript. The user clicks on a button on the page, the server generates a customized data file based on some of his/her account settings (and other parameters), and then the "Save as..." dialog should pop up. How should I go about implementing this in Javascript?
edit: for your reference, the server has Glassfish and Apache
Jane,
The save-as dialog only appears on page load. You need to redirect your user either directly to the file you want them to save, or to a server-side page that serves up the file.
Once you know the address of the file, do something like
window.location = http://yourserver.com/generatedfiles/file_2342342.txt
Alternatively, do something like this:
window.location = http://yourserver.com/getgeneratedfile.aspx?fileID=2342342
...which would redirect the user to a page that feeds the generated file. You then need to specify the content-disposition and filename in the header that comes from that page, as mentioned in Gandalf's reply.
Edit: Ah, you're using Apache. Probably won't have ASPX files on there then.
Set the Http Response header:
Content-Disposition: attachment; filename=myfile.txt
Or something like this
Save this page
#aric's answer is correct; however, window.location will cause load/unload events to get fired which may not be desirable for your application. In this case, you can likely direct a hidden iframe to the url to cause the save dialog to appear without losing your page's state.
Also, 'SaveAs' is probably an IE specific value for document.execCommand as it doesn't exist in Firefox.

Follow a URL using JavaScript

Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.

Categories