table in a new window - newbie question

[Micha³ Kurowski]

Hi,

It must be a trivial thing to do but I'm a complete ecmascript newbie
with an urgent need ...

I'd like to have a script producing a popup window with a selected
table displayed exactly as in an original page - width and hight are
specially important.

As far as I understand I need to call "getElementById" with a table
"ID" as an argument and then call "window.open" with it.

I'm stuck on an URL problem ... Basically I do not need any URL at all
- I just want a new window to inherit everything from parent. The only
addition should be a "close" button.

I would be really greatfull for some examples/pointers - but make it
simple enough for a newbie ...

Another question - how to make sure such a window will not be treated
as a typical popup ? I mean browsers' popup blocking - is there a way
to differentiate these things ?

Thanks,

 

[Richard Cornford]

Micha³ Kurowski wrote:

I'd like to have a script producing a popup window with a selected
table displayed exactly as in an original page - width and hight are
specially important.

As far as I understand I need to call "getElementById" with a table
"ID" as an argument and then call "window.open" with it.

That isn't going to work, elements are not valid arguments to -
window.open -. Probably your best bet is to create a small page on your
site, with the necessary CSS, etc, but no body contents, and load that
into a new window. And once it has loaded replace the contents of it's
body with your table. You could do that by having an onload handler in
this new page call a function in the - opener - that gets the -
innerHTML - of an IDed element that _contains_only_ the table and
returns it. That onload handler would then write the returned string
into the - innerHTML - value of its body element. Obviously this is
subject to javascript support on the browser and its implementation of
the - innerHTML - property in a suitably dynamic way.

I'm stuck on an URL problem ... Basically I do not need any URL at all
- I just want a new window to inherit everything from parent. The only
addition should be a "close" button.

Windows already have a close button. But you could append a chunk of
HTML defining such a button to the - innerHTML - of the element
containing the table before writing it to the - innerHTML - of the body
in the pop-up.

I would be really greatfull for some examples/pointers - but make it
simple enough for a newbie ...

Sorry, I don't have time right now, but someone else might.

Another question - how to make sure such a window will not be treated
as a typical popup ? I mean browsers' popup blocking - is there a way
to differentiate these things ?

The window is a typical pop-up so it will be treated as such. The more
modern browsers with built in pop-up blocking are quite good at
recognising "requested" pop-ups and allowing them. Requested pop-ups
directly result form user actions. Other pop-up blocking systems are not
so good at this (or don't even try). See:-

<URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html >

Richard.

 

[kaeli]

Hi,

It must be a trivial thing to do but I'm a complete ecmascript newbie
with an urgent need ...

No, it's really not trivial.

I'd like to have a script producing a popup window with a selected
table displayed exactly as in an original page - width and hight are
specially important.

As far as I understand I need to call "getElementById" with a table
"ID" as an argument and then call "window.open" with it.

Um, no. Not quite.

I'm stuck on an URL problem ... Basically I do not need any URL at all
- I just want a new window to inherit everything from parent. The only
addition should be a "close" button.

I would be really greatfull for some examples/pointers - but make it
simple enough for a newbie ...

See code below.
Works in NN7. Didn't test it in anything else. My IE's being a PITA
today.

Another question - how to make sure such a window will not be treated
as a typical popup ? I mean browsers' popup blocking - is there a way
to differentiate these things ?

Nope - popup blockers may kill it. However, the new window is opened
from a direct user click, so most should be okay, IME. My NN is set to
block *unrequested* popups and it allowed this.

Here's the code.
Check it out. See if it helps.
Note that it is DOM browsers only. Will fail in NN4 for sure.

Also note that this will not work if you styled your table with an
internal/inline stylesheet. You can use an external sheet and put a link
in the new window, though. WATCH for WORD-WRAP.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>

<script language="javascript" type="text/javascript">
var p_window=null;
function printWindow()
{
if (! document.getElementById || ! document.createElement || !
document.appendChild )
{
alert("Unsupported browser. Sorry.");
return;
}
if (!p_window || p_window == null || typeof p_window == "undefined" ||
p_window.closed || !p_window.document)
p_window = window.open("","Print Window","height=300,width=
300,scrollbars=yes,resizable=yes");
var doc = p_window.document;
doc.title = "Print Window";
var p1 = doc.createElement("p");
p1.appendChild(doc.createTextNode("Print Window"));
doc.body.appendChild(p1);
var e = document.getElementById('t1');
doc.body.appendChild(e.cloneNode(true));
var a = doc.createElement("a");
a.setAttribute("href","javascript:self.close()");
a.appendChild(doc.createTextNode("Close Me"));
doc.body.appendChild(a);
p_window.focus();
return;
}
</script>
</head>
<body>

<a href="#" onClick="printWindow(); return false;">Click here to open
print window.</a><br>
<table id="t1" width="200" height="200" border="1" cellpadding="0"
cellspacing="0">
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
</table>
</body>

--

 

[Lasse Reichstein Nielsen]

Works in NN7. Didn't test it in anything else. My IE's being a PITA
today.
....

var e = document.getElementById('t1');
doc.body.appendChild(e.cloneNode(true));

This ought to fail. Elements belong to the document that created them.
Here you insert a clone of an element from "document" into the document
"doc".
The "correct" way would be:
doc.body.appendChild(doc.importNode(e, true));
(the "true" means to make a deep copy of the imported node).

Obviously, IE doesn't understand "importNode".
/L

 

[Micha³ Kurowski]

OK, both solutions work just great. I think I prefer the "innerHTML"
one - it's surely faster although might enable that much control as the
second one.

But I've got much more serious problem. I need to have the new window
with size exactly matching the size of the original table.
"window.open" does not allow that. it seems. I have to pass "height"
and "width" arguments and that breaks the whole purpose of it.

Is there any solution to that problem ?

<URL: http://www.litotes.demon.co.uk/js_info/pop_ups.html >

Very interesting page.

Thanks a lot,

 

[kaeli]

This ought to fail.

I finally got IE going, and it does indeed fail in IE.
I wonder why it works in NN 7...

Elements belong to the document that created them.
Here you insert a clone of an element from "document" into the document
"doc".
The "correct" way would be:
doc.body.appendChild(doc.importNode(e, true));
(the "true" means to make a deep copy of the imported node).

Obviously, IE doesn't understand "importNode".

*sigh*
And I can't find any comparable.
Know of any?

--
--
~kaeli~
Have you forgotten about Jesus?
Isn't it about time you did?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[kaeli]

This ought to fail. Elements belong to the document that created them.
Here you insert a clone of an element from "document" into the document
"doc".
The "correct" way would be:
doc.body.appendChild(doc.importNode(e, true));
(the "true" means to make a deep copy of the imported node).

This fails in NN. Some sort of security error. I bet it's because of the
cross-domain issue that had me using cloneNode to begin with due to same
security error.

Error:
Security Error: Content at http://www.myserver.com/test.html may not
load data from about:blank

--
--
~kaeli~
Have you forgotten about Jesus?
Isn't it about time you did?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Lasse Reichstein Nielsen]

This fails in NN. Some sort of security error. I bet it's because of the
cross-domain issue that had me using cloneNode to begin with due to same
security error.

Ah, yes. I didn't check for corss domain problems.
Actually, I am surpriced that cloneNode manages to avoid the problem.
It's likely to be a bug that will be fixed later.

/L

 

[kaeli]

OK, both solutions work just great. I think I prefer the "innerHTML"
one - it's surely faster although might enable that much control as the
second one.

But I've got much more serious problem. I need to have the new window
with size exactly matching the size of the original table.
"window.open" does not allow that. it seems. I have to pass "height"
and "width" arguments and that breaks the whole purpose of it.

Is there any solution to that problem ?

Well, this is just an idea, but have you tried window.resizeTo in the
popup after it writes the table? I *think* you can get the height and
width of an element in the doc, but don't quote me.

Note that Netscape/Mozilla allows the user to disallow the resizing of
windows.

If you find a solution that works in IE and NN6+, please post it. I've
been dicking around trying to figure out a similar problem for awhile
now and haven't gotten it to work in both browsers.

--

 

[Thomas 'PointedEars' Lahn]

Well, this is just an idea, but have you tried window.resizeTo in the
popup after it writes the table? I *think* you can get the height and
width of an element in the doc, but don't quote me.

Note that Netscape/Mozilla allows the user to disallow the resizing of
windows.

Netscape/Mozilla, among others, also allow for tabbed browsing,
so resizeTo() should be considered harmful on the Web nowadays.


PointedEars