How to view results of document.write()?

Discussion in 'Javascript' started by Eli, Nov 10, 2004.

  1. Eli

    Eli Guest

    I've got a script that I'm trying to debug which uses document.write()
    to place HTML within a page. In both IE6 and Firefox when I view
    source, I see only the script itself and not any HTML as it's being
    written into the page.

    Is there a way that I can view what is being placed into the page,
    instead of, or in addition to the javascript code?
    Eli, Nov 10, 2004
    #1
    1. Advertising

  2. Eli

    Hal Rosser Guest

    "Eli" <> wrote in message
    news:...
    > I've got a script that I'm trying to debug which uses document.write()
    > to place HTML within a page. In both IE6 and Firefox when I view
    > source, I see only the script itself and not any HTML as it's being
    > written into the page.
    >
    > Is there a way that I can view what is being placed into the page,
    > instead of, or in addition to the javascript code?
    >


    call up the page in the browser.
    that is what it writes.



    ---
    Outgoing mail is certified Virus Free.
    Checked by AVG anti-virus system (http://www.grisoft.com).
    Version: 6.0.788 / Virus Database: 533 - Release Date: 11/1/2004
    Hal Rosser, Nov 10, 2004
    #2
    1. Advertising

  3. Eli

    Randy Webb Guest

    Hal Rosser wrote:
    > "Eli" <> wrote in message
    > news:...
    >
    >>I've got a script that I'm trying to debug which uses document.write()
    >>to place HTML within a page. In both IE6 and Firefox when I view
    >>source, I see only the script itself and not any HTML as it's being
    >>written into the page.
    >>
    >>Is there a way that I can view what is being placed into the page,
    >>instead of, or in addition to the javascript code?
    >>

    >
    >
    > call up the page in the browser.
    > that is what it writes.


    Do you ever actually test what you answer?

    To the OP:
    The simplest way is to add a textarea to the page, instead of
    document.write (or in addition to), set the textarea's value to your
    variable.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Randy Webb, Nov 10, 2004
    #3
  4. Eli

    Eli Guest

    On Wed, 10 Nov 2004 01:17:38 -0500, Randy Webb
    <> wrote:

    >Hal Rosser wrote:
    >> "Eli" <> wrote in message
    >> news:...
    >>
    >>>I've got a script that I'm trying to debug which uses document.write()
    >>>to place HTML within a page. In both IE6 and Firefox when I view
    >>>source, I see only the script itself and not any HTML as it's being
    >>>written into the page.
    >>>
    >>>Is there a way that I can view what is being placed into the page,
    >>>instead of, or in addition to the javascript code?
    >>>

    >>
    >>
    >> call up the page in the browser.
    >> that is what it writes.

    >
    >Do you ever actually test what you answer?
    >
    >To the OP:
    >The simplest way is to add a textarea to the page, instead of
    >document.write (or in addition to), set the textarea's value to your
    >variable.


    Thank you. As it stands the code doesn't do a single document.write()
    of a variable, but numerous writes in conditionals, loops, etc.

    I suppose it could be rewritten as such, however, if this is the best
    way.
    Eli, Nov 10, 2004
    #4
  5. Eli

    RobG Guest

    Eli wrote:
    [...]
    > I suppose it could be rewritten as such, however, if this is the best
    > way.
    >


    Try loading in Firefox and use File -> Save as...


    Cheers, Rob.
    RobG, Nov 10, 2004
    #5
  6. Eli

    Randy Webb Guest

    Eli wrote:
    > On Wed, 10 Nov 2004 01:17:38 -0500, Randy Webb
    > <> wrote:
    >
    >
    >>Hal Rosser wrote:
    >>
    >>>"Eli" <> wrote in message
    >>>news:...
    >>>
    >>>
    >>>>I've got a script that I'm trying to debug which uses document.write()
    >>>>to place HTML within a page. In both IE6 and Firefox when I view
    >>>>source, I see only the script itself and not any HTML as it's being
    >>>>written into the page.
    >>>>
    >>>>Is there a way that I can view what is being placed into the page,
    >>>>instead of, or in addition to the javascript code?
    >>>>
    >>>
    >>>
    >>>call up the page in the browser.
    >>>that is what it writes.

    >>
    >>Do you ever actually test what you answer?
    >>
    >>To the OP:
    >>The simplest way is to add a textarea to the page, instead of
    >>document.write (or in addition to), set the textarea's value to your
    >>variable.

    >
    >
    > Thank you. As it stands the code doesn't do a single document.write()
    > of a variable, but numerous writes in conditionals, loops, etc.
    >
    > I suppose it could be rewritten as such, however, if this is the best
    > way.
    >


    It is always best to make a single string and then do one document.write
    than doing multiple document.write's

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Randy Webb, Nov 10, 2004
    #6
  7. On Wed, 10 Nov 2004 00:05:26 -0700, Eli <> wrote:

    > On Wed, 10 Nov 2004 01:17:38 -0500, Randy Webb
    > <> wrote:


    [snip]

    >> The simplest way is to add a textarea to the page, instead of
    >> document.write (or in addition to), set the textarea's value to your
    >> variable.

    >
    > Thank you. As it stands the code doesn't do a single document.write()
    > of a variable, but numerous writes in conditionals, loops, etc.
    >
    > I suppose it could be rewritten as such, however, if this is the best
    > way.


    If it's too much trouble to change your code, then change what the write
    method does. :)

    document.write = (function() {
    /* Perform a one-time initialisation of the overriding
    * function.
    *
    * This will hold the property name for the original
    * write method so it can be called later.
    */
    var old = '__write',
    /* When this method is called, it is possible that the
    * textarea used to hold the output has not been encountered
    * yet, so it can not be addressed through the DOM. Until
    * it is accessible, output is stored in the variable below.
    */
    tmp = '',
    /* This is the id of the textarea where output should
    * be directed. Change it as you see fit.
    */
    output = 'textarea-id',
    /* This is text that should be appended to any text sent to
    * the output textarea. You might just want to leave it as-is
    * (a new line), but change this too if you want. Note that
    * it won't affect what is actually written to the document.
    */
    suffix = '\n',
    /* Similar to the above, but prepended to the text. */
    prefix = '';

    /* Search for an identifier that is not currently used
    * where the original function can be stored.
    */
    while('undefined' != typeof document[old]) {old += '__';}
    /* Once found, add a reference to the original method. */
    document[old] = document.write;

    /* Now that the initialisation is complete, the function
    * below overrides the original method.
    */
    return function(str) {
    /* Attempt to get a reference to the debugging
    * textarea element.
    */
    var o = document.getElementById(output);
    /* Store the text in case the call above fails. */
    tmp += prefix + str + suffix;
    /* Write the text using the original method. */
    document[old](str);

    /* If the textarea could be found, we can begin preparations
    * to use it in every call after this point. As we won't need
    * to store the text any more, we can prevent that code from
    * being called by substituting yet another function.
    */
    if(output) {
    /* Send the stored text to the textarea. If you want to use
    * the textarea for other things, you might want to change
    * this line from an assignment (=) to a concatenation (+=).
    */
    output.value = tmp;
    /* As we may have built up a lot of text,
    * let's free some memory.
    */
    tmp = null;
    /* From now on, this whole process can be streamlined.
    * As we now have access to the textarea element, text
    * can be added to it directly.
    */
    return function(str) {
    output.value += prefix + str + suffix;
    document[old](str);
    }
    }
    };
    })();

    You'll probably have to change the string, output, and possibly the prefix
    and suffix strings. Copy this code into a SCRIPT element in the HEAD
    section of the document, and call document.write as normal. Depending
    where your document.write calls are in respect to the debugging TEXTAREA
    element, you may need to add a call at the end of your page - even just
    document.write('') - to flush the buffer.

    If you use the writeln method, too, you can pretty much copy the above,
    changing "write" to "writeln" where needed. The code is actually quite
    compact - it's just the comments that make it so imposing.

    Good luck,
    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Nov 10, 2004
    #7
  8. Eli

    Grant Wagner Guest

    Eli wrote:

    > On Wed, 10 Nov 2004 01:17:38 -0500, Randy Webb
    > <> wrote:
    >
    > >Hal Rosser wrote:
    > >> "Eli" <> wrote in message
    > >> news:...
    > >>
    > >>>I've got a script that I'm trying to debug which uses document.write()
    > >>>to place HTML within a page. In both IE6 and Firefox when I view
    > >>>source, I see only the script itself and not any HTML as it's being
    > >>>written into the page.
    > >>>
    > >>>Is there a way that I can view what is being placed into the page,
    > >>>instead of, or in addition to the javascript code?
    > >>>
    > >>
    > >>
    > >> call up the page in the browser.
    > >> that is what it writes.

    > >
    > >Do you ever actually test what you answer?
    > >
    > >To the OP:
    > >The simplest way is to add a textarea to the page, instead of
    > >document.write (or in addition to), set the textarea's value to your
    > >variable.

    >
    > Thank you. As it stands the code doesn't do a single document.write()
    > of a variable, but numerous writes in conditionals, loops, etc.
    >
    > I suppose it could be rewritten as such, however, if this is the best
    > way.


    This doesn't work all that well, but it will show you the dynamic content (as
    well as the script:

    <button
    onclick="window.open('javascript:eek:pener.document.documentElement.innerHTML.replace(/</g,
    \'&\' + \'lt;\');');">View Dynamic Source</button>

    Others can probably improve on this, but it's probably best to design your
    script to output known HTML, rather than guessing and using some hack like
    the above to try to make sure it's right.

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Grant Wagner, Nov 10, 2004
    #8
  9. Eli

    Matt Kruse Guest

    Eli wrote:
    > Is there a way that I can view what is being placed into the page,
    > instead of, or in addition to the javascript code?


    I use the code below in my IE context menu. You could easily turn it into a
    bookmarklet if you wanted to. It shows me the source exactly as IE sees it,
    which is what I usually need:

    var srcwin =
    window.open('about:blank','src','width=1200,height=900,top=0,left=0');
    srcwin.document.open();
    srcwin.document.writeln('<html><body><form><table width=100%
    height=100%><tr><td><textarea name="src" id="src"
    style="width:100%;height:100%;"
    wrap="off"></textarea></td></tr></table></form></body></html>');
    srcwin.document.close();
    srcwin.document.forms[0].src.value =
    doc.getElementsByTagName('html').item(0).outerHTML;

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    Matt Kruse, Nov 10, 2004
    #9
  10. Eli

    RobB Guest

    Grant Wagner <> wrote in message news:<>...
    > Eli wrote:
    >
    > > On Wed, 10 Nov 2004 01:17:38 -0500, Randy Webb
    > > <> wrote:
    > >
    > > >Hal Rosser wrote:
    > > >> "Eli" <> wrote in message
    > > >> news:...
    > > >>
    > > >>>I've got a script that I'm trying to debug which uses document.write()
    > > >>>to place HTML within a page. In both IE6 and Firefox when I view
    > > >>>source, I see only the script itself and not any HTML as it's being
    > > >>>written into the page.
    > > >>>
    > > >>>Is there a way that I can view what is being placed into the page,
    > > >>>instead of, or in addition to the javascript code?
    > > >>>
    > > >>
    > > >>
    > > >> call up the page in the browser.
    > > >> that is what it writes.
    > > >
    > > >Do you ever actually test what you answer?
    > > >
    > > >To the OP:
    > > >The simplest way is to add a textarea to the page, instead of
    > > >document.write (or in addition to), set the textarea's value to your
    > > >variable.

    > >
    > > Thank you. As it stands the code doesn't do a single document.write()
    > > of a variable, but numerous writes in conditionals, loops, etc.
    > >
    > > I suppose it could be rewritten as such, however, if this is the best
    > > way.

    >
    > This doesn't work all that well, but it will show you the dynamic content (as
    > well as the script:
    >
    > <button
    > onclick="window.open('javascript:eek:pener.document.documentElement.innerHTML.replace(/</g,
    > \'&\' + \'lt;\');');">View Dynamic Source</button>
    >
    > Others can probably improve on this, but it's probably best to design your
    > script to output known HTML, rather than guessing and using some hack like
    > the above to try to make sure it's right.


    You might try something like this:

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>untitled</title>
    <script type="text/javascript">
    //<![CDATA[

    var ptwin = null,
    r = null,
    gstr = '';

    function plaintextwin()
    {
    if (null != r)
    clearTimeout(r);
    if (ptwin && !ptwin.closed)
    ptwin.close();
    var str = '';
    for (var a = 0; a < arguments.length; ++a)
    str += arguments[a].concat('\n');
    gstr = gstr.concat(str.replace(/(<[^/])/g, '\n$1').concat('\n'));
    ptwin = open('about:blank', 'ptwin',
    'width=100,height=100,left=20,top=50,scrollbars,resizable');
    ptwin.document.open('text/plain');
    ptwin.document.write(gstr);
    ptwin.document.close();
    ptwin.focus();
    r = setTimeout('ptwin.resizeTo(' + (screen.width * .95) + ',' +
    (screen.height * .66) + ')',100);
    }

    document.write = plaintextwin;

    s = '<span class="foo">hah</span><h4>Hello, World !</h4><br />';
    document.write(s);
    document.write('<div class=vs6>&nbsp;</div><a
    href="http://ftp.netscape.com/pub/netscape7/english/7.2/mac/Netscape-MachO.dmg.gz">Mac
    OS X</a>');
    document.write("I've got a script that I'm trying to debug which uses
    document.write() to place HTML within a page.");
    document.write('.vbmenu_hilite a:hover, .vbmenu_hilite a:active
    {color: #FFFFFF; text-decoration: none;}');
    document.write('alpha' , 'beta' , 'gamma');

    //]]>
    </script>
    </head>
    <body>
    </body>
    </html>

    Works in IE, which allows a mimetype as an argument to
    document.open(). Buggy in Firefox, no time to find out why. Should
    allow you to at least see what's printing. I disagree about the 'one
    big string' approach - document.write/ln take multiple arguments,
    comma-separated as usual, an efficient way to avoid repeated
    invocations.
    RobB, Nov 10, 2004
    #10
  11. Eli

    Robert Guest

    Eli <> wrote in message news:<>...

    > Is there a way that I can view what is being placed into the page,
    > instead of, or in addition to the javascript code?


    There are a number of one line Javascript programs you can use that
    have appeared in this forum that will display the generated html. Use
    the search term one liner against this forum.

    What you do is take one of these one liners and place it as a bookmark
    in your browser. One way of creating the bookmark is to take a
    bookmark and change it to the one liner by editing bookmarks.

    The following one-liner when pasted into the command line will
    display the generated html. (It looks for line ends which are OS
    dependent.):

    javascript:'<html><head><title>SourceFileListing<\/title><\/head><body><code><ol><li>'+(document.documentElement||document.body).innerHTML.replace(/&/g,%22&amp;%22).replace(/</g,%22&lt;%22).replace(/%20%20/g,%22&nbsp;%20%22).replace(/\r\n/g,%22<li>%22).replace(/\n/g,%22<li>%22).replace(/\r/g,%22<li>%22)+'<\/ol><\/code><\/body><\/html>';


    Robert
    Robert, Nov 10, 2004
    #11
  12. On Wed, 10 Nov 2004 14:19:06 GMT, Michael Winter
    <> wrote:

    [snipped script]

    Damn it! I posted the wrong script.

    document.write = (function() {
    /* Perform a one-time initialisation of the overriding
    * function.
    *
    * This will hold the property name for the original
    * write method so it can be called later.
    */
    var old = '__write',
    /* When this method is called, it is possible that the
    * textarea used to hold the output has not been encountered
    * yet, so it can not be addressed through the DOM. Until
    * it is accessible, output is stored in the variable below.
    */
    tmp = '',
    /* This is the id of the textarea where output should
    * be directed. Change it as you see fit.
    */
    output = 'textarea-id',
    /* This is text that should be appended to any text sent to
    * the output textarea. You might just want to leave it as-is
    * (a new line), but change this too if you want. Note that
    * it won't affect what is actually written to the document.
    */
    suffix = '\n',
    /* Similar to the above, but prepended to the text. */
    prefix = '';

    /* Search for an identifier that is not currently used
    * where the original function can be stored.
    */
    while('undefined' != typeof document[old]) {old += '__';}
    /* Once found, add a reference to the original method. */
    document[old] = document.write;

    /* Now that the initialisation is complete, the function
    * below overrides the original method.
    */
    function func(str) {
    /* Attempt to get a reference to the debugging
    * textarea element.
    */
    var o = document.getElementById(output);
    /* Store the text in case the call above fails. */
    tmp += prefix + str + suffix;
    /* Write the text using the original method. */
    document[old](str);

    /* If the textarea could be found, we can begin preparations
    * to use it in every call after this point. As we won't need
    * to store the text any more, we can prevent that code from
    * being called by substituting yet another function.
    */
    if(o) {
    /* Send the stored text to the textarea. If you want to use
    * the textarea for other things, you might want to change
    * this line from an assignment (=) to a concatenation (+=).
    */
    o.value = tmp;
    /* As we may have built up a lot of text,
    * let's free some memory.
    */
    tmp = null;
    /* From now on, this whole process can be streamlined.
    * As we now have access to the textarea element, text
    * can be added to it directly.
    */
    func = function(str) {
    o.value += prefix + str + suffix;
    document[old](str);
    }
    }
    }
    return function(s) {func(s);};
    })();

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Nov 11, 2004
    #12
  13. Eli

    Jim Ley Guest

    On Thu, 11 Nov 2004 18:52:45 GMT, "Michael Winter"
    <> wrote:

    >On Wed, 10 Nov 2004 14:19:06 GMT, Michael Winter
    ><> wrote:
    >
    >[snipped script]
    >
    >Damn it! I posted the wrong script.
    >
    > document.write = (function() {


    This causes an error on Win 2000 fully patched IE5.5's so it might be
    worth avoiding!

    Jim.
    Jim Ley, Nov 11, 2004
    #13
  14. On Thu, 11 Nov 2004 18:53:35 GMT, Jim Ley <> wrote:

    > On Thu, 11 Nov 2004 18:52:45 GMT, "Michael Winter"
    > <> wrote:


    [snip]

    >> document.write = (function() {

    >
    > This causes an error on Win 2000 fully patched IE5.5's so it might be
    > worth avoiding!


    Is that because it doesn't like a script overriding a host method, or
    can't it handle that pattern? I don't have IE 5.5 to test and there are no
    problems with IE6/XP.

    Anyway, it was only a debugging suggestion, not production code. Thanks
    for mentioning it in any event.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Nov 11, 2004
    #14
  15. Eli

    Jim Ley Guest

    On Thu, 11 Nov 2004 19:09:34 GMT, "Michael Winter"
    <> wrote:

    >On Thu, 11 Nov 2004 18:53:35 GMT, Jim Ley <> wrote:
    >
    >> On Thu, 11 Nov 2004 18:52:45 GMT, "Michael Winter"
    >> <> wrote:

    >
    >[snip]
    >
    >>> document.write = (function() {

    >>
    >> This causes an error on Win 2000 fully patched IE5.5's so it might be
    >> worth avoiding!

    >
    >Is that because it doesn't like a script overriding a host method, or
    >can't it handle that pattern? I don't have IE 5.5 to test and there are no
    >problems with IE6/XP.


    It's just document.write and writeln - I assume it's a bug, took out
    an intranet of mine, hopefully another patch will fix it. it seemed
    IE 5.5sp2 and win2000 specific, although didn't test than many other
    5.5's

    Jim.
    Jim Ley, Nov 11, 2004
    #15
    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. Monique Y. Mudama
    Replies:
    1
    Views:
    443
    Monique Y. Mudama
    Jun 28, 2005
  2. Parthiv Joshi
    Replies:
    1
    Views:
    649
    Samuel L Matzen
    Jul 6, 2004
  3. Jack3000

    View Code Written by "document.write"?

    Jack3000, Aug 6, 2004, in forum: Javascript
    Replies:
    2
    Views:
    116
  4. jullag
    Replies:
    20
    Views:
    296
    Frances
    Sep 22, 2005
  5. Frank Peterson
    Replies:
    9
    Views:
    220
    David Mark
    Jun 28, 2009
Loading...

Share This Page