Writing to another window

[scottsplace]

I posted a message yesterday asking help on cloning a window. The intent is to create a "printable" view of a web page. I was trying to do something like this:

newWin = window.open ();
var elems = document.forms[0].elements;
for (var idx = 0; idx < elems.length; idx++) {
// Filter unneeded stuff here...

// Clone the rest
var newElem = elems[idx].cloneNode (true);
newWin.document.appendChild (newElem);
}


"Jona" offered a solution:

var elems = document.body.innerHTML;
newWin.document.write (elems);
newWin.document.close ();
// Remove unneeded stuff here using removeChild

In the first case, nodes seem to be cloned, but they are not appended to the new window. In the second case I'm unable to remove elements from the new window. Being a javascript novice, can somebody tell me where I'm going wrong here?
Reopen window for 'write'?
Need to flush cache?
Redraw window?
Or is it just not possible to do this.

Scott!

[Jona]

I'm going to go and get on my other computer later to figure this out. I'll have to reference my JavaScript book that gives all of the createTextNode() and stuff like that...

[Jona]

I've attached the best documented code that I can. It clones the current document. I've tested it in IE 5.5 and it works but the new window thing doesn't. It should work but the computer says that it's not possible to clone nodes in a new window. I've tried running scripts in the new window and all but nothing works. It may still be possible, but I doubt it at this point. Here's the script, good luck!

[Jona]

By the way, you can also preview the script online at: http://geocities.com/god_loves_07/scott_createElem.html

[Vladdy]

Just make @print stylesheet :rolleyes:

[Jona]

Well, Vladdy, you're right... But I wasn't exactly addressing his original problem. I was working so hard on trying to get the new window to clone the opener that I forgot about the original purpose of the script. I just did all I could do. The script he originally had wouldn't have cloned the window anyways, since he only had document.appendChild() (which does not exist) instead of document.body.appendChild(). Anyways, do you know of any way to clone the opener and print it to the new window?

[Vladdy]

Ever tried to use node.cloneNode(true) ?

[scottsplace]

Thanks very much for you effort. After not hearing anything overnight I did some more internet searchs and found this solution about 5 minutes before I got the notification of your posts. Oh well...

Scott!

[Jona]

Yes, Vladdy, I tried that. I didn't know that the value was boolean, though. No matter what I tried in the parenthesis of cloneNode(), I got the same result.

After not hearing anything overnight I did some more internet searchs and found this solution about 5 minutes before I got the notification of your posts.

So what was the answer? Please tell us! We'd like to hear what you came up with. A URL or if you could post some code please. This interests me a great deal.

[scottsplace]

I may have been a tad hasty...

The goal is to create a script to display a "printable" view of a dynamically generated web page, where all the elements use absolute positioning. My first cut is to adjust textareas.

function printScript() {
var newWin = window.open ();

var yOffset = 0;
var taBottom = 1000;
var elems = document.forms[0].getElementsByTagName ("*");
for (var idx = 0; idx < elems.length; idx++) {
var oldElem = elems[idx];
if (oldElem.tagName == "SCRIPT") continue;
if (oldElem.tagName == "INPUT" && oldElem.type == "button") continue;
if (oldElem.tagName == "INPUT" && oldElem.type == "hidden") continue;

var newElem;
if (oldElem.tagName == "TEXTAREA") {
newElem = newWin.document.createElement ("TABLE");
//newElem.innerHTML = "<tr><td>cell</td></tr>";
newElem.setAttribute ("BORDER", "1");
newElem.setAttribute ("CELLPADDING", "3");
newElem.setAttribute ("COLS", "1");
newElem.setAttribute ("STYLE", oldElem.getAttribute("STYLE"));

var trElem = newWin.document.createElement ("TR");
var tdElem = newWin.document.createElement ("TD");
var oldText = oldElem.value;
//oldText.replace (, "<br/>");
var tNode = newWin.document.createTextNode (oldText);

tdElem.appendChild (tNode);
trElem.appendChild (tdElem);
newElem.appendChild (trElem);
newWin.document.body.appendChild (newElem);

taBottom = oldElem.offsetTop + oldElem.offsetHeight;
var dh = newElem.offsetHeight - oldElem.offsetHeight;
yOffset += dh;

} else {
newElem = oldElem.cloneNode (true);
//var dbg = "";
//for (var list in newWin.document.body)
// dbg += list + "---";
//alert (dbg);
newWin.document.body.appendChild (newElem);

}

if (oldElem.offsetTop > taBottom) {
if (is.ie) {
newElem.offsetTop = newElem.offsetTop + yOffset;
} else {
newElem.moveBy (0, yOffset);
}
}
}

newWin.document.close ();
newWin.focus ();
}

This works very well on NS7.
IE6 gets a javascript error on the line:
newWin.document.body.appendChild (newElem);

Using 'alert' debug, I can see that 'body' and 'newElem' exist, but that 'body' does not have an 'appendChild' method. How can this be? If it doesn't, how can I work around it?

Scott!

[nkaisare]

Think about using CSS. Its as easy as creating a single CSS file for print media with {display: none} for all navigation images/texts. Life couldn't get easier than that... only if we stop a little and think without the "burden of history".

If you use NS6+, Opera 5+, Mozilla or IE5/Mac, visit
http://www.meyerweb.com/eric/css/edge/
It has examples of image rollovers and transperant foreground without using any javascript... just plain CSS.

YOU'VE GOT THE POWER!!! :D