Saving a child window saves the parent window instead (Javascript)

Question

Hello All,

I have a bit of Javascript code that creates a "save friendly" version of a webpage.

child = window.open("","child");
child.document.write(htmlPage);

"htmlPage" is the basic html of the page with all the javascript references taken out, a different set of header images references, etc.

Everything displays perfectly in the popup window, with no javascript running. When I click on "File->Save As", the saved file is the parent window, along with all of its javascript, and with no trace of the child window. Does anyone know how to solve this problem? I want to save only the child window.

Thanks, -Kraryal

Answer 1

When you save the page it will save the original URL content (e.g. just as if you downloaded a fresh copy)

If you want a "cleansed" version, you'll need to generate that version on the server, and open the popup with that URL as the first param.

Answer 2

for a windows/IE only version see here: http://p2p.wrox.com/javascript-how/3193-how-do-you-save-html-page-your-local-hd.html

I know, terrible, but just in case it's for like an IE-only intranet....

Answer 3

Alas, it seems I haven't enough reputation to add comments to my question, so I'll add this here.

This javascript is deployed for both Internet Explorer and Safari. The hosting application doesn't always have access to the local file system.

The users can mark up the page they are working with, then save it for later printing or emailing. We tell them to save it as a single-file archive so it can actually be mail. The save dialog can do that, and the user can put the file somewhere they have access t, so that's why we used it.

It seems the simple way would be to write the new html from the javascript to the local directory, but we can't always do that. Any other ideas? Thanks for the help so far.

Answer 4

I had a similar situation (but wasn't willing to give up altogether). I'm constructing a save-friendly version of a webpage using Javascript that I want the user to download as a text file (comma-separated values, in my case). I think data: URIs can help here.

//construct the csvOutput in Javascript first
var popup = window.open("data:application/octet-stream," + encodeURIComponent(csvOutput), "child");
//no need to document.write() anything in the child window

In Firefox, this doesn't pop up a window even, just asks the user if they want to save the file, and saves it as a .part file. Not exactly ideal, but at least it saves the file without popping up an unnecessary window.

Alternatively, we can use the text/plain MIME type:

//construct the csvOutput in Javascript first
var popup = window.open("data:text/plain;charset=utf-8," + encodeURIComponent(csvOutput), "child");

In Firefox, this does pop open a new window, but then it's saved by default as ASCII text, without any of the cruft of the parent window or any line-wrapping. This is probably what I will use.

It looks like this won't work in IE though. IE 8 is the only version that supports data: URIs, and it has a series of restrictions on where it can be used. For IE, you might look at execCommand.

Thanks to this tek-tip thread and the Wikipedia article on the data URI scheme.