table in a new window - newbie question

Discussion in 'Javascript' started by Micha³ Kurowski, Jun 24, 2004.

  1. 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,

    --
    Michal Kurowski
    <>
     
    Micha³ Kurowski, Jun 24, 2004
    #1
    1. Advertising

  2. Micha³ Kurowski wrote:
    <snip>
    > 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.
     
    Richard Cornford, Jun 24, 2004
    #2
    1. Advertising

  3. Micha³ Kurowski

    kaeli Guest

    In article <cbdihi$j4m$>,
    enlightened us with...
    > 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>

    --
    --
    ~kaeli~
    What's another word for thesaurus?
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Jun 24, 2004
    #3
  4. kaeli <> writes:

    > 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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Jun 24, 2004
    #4
  5. 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,

    --
    Michal Kurowski
    <>
     
    Micha³ Kurowski, Jun 24, 2004
    #5
  6. Micha³ Kurowski

    kaeli Guest

    In article <>, enlightened us
    with...
    > kaeli <> writes:
    >
    > > 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.


    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, Jun 24, 2004
    #6
  7. Micha³ Kurowski

    kaeli Guest

    In article <>, enlightened us
    with...
    > kaeli <> writes:
    >
    > > 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).


    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
     
    kaeli, Jun 24, 2004
    #7
  8. kaeli <> writes:

    > 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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Jun 24, 2004
    #8
  9. Micha³ Kurowski

    kaeli Guest

    In article <cbetdv$9ai$>,
    enlightened us with...
    >
    > 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.

    --
    --
    ~kaeli~
    Practice safe eating - always use condiments.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Jun 25, 2004
    #9
  10. kaeli wrote:
    > 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
     
    Thomas 'PointedEars' Lahn, Jun 29, 2004
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?Tm92aWNl?=
    Replies:
    2
    Views:
    6,689
    Alan Ferrandiz Langley
    Jun 9, 2004
  2. Matt
    Replies:
    2
    Views:
    14,034
    bruce barker
    Aug 23, 2004
  3. Matt
    Replies:
    1
    Views:
    448
    Andrew Thompson
    Aug 22, 2004
  4. Matt
    Replies:
    5
    Views:
    3,052
    Michael Winter
    Aug 25, 2004
  5. Gordon
    Replies:
    3
    Views:
    323
    Steven Burn
    Apr 16, 2004
Loading...

Share This Page