Martin Spedding's Blog

Adventures in a disconnected world

How to view the html generated by Javascript document.write commands

If you have some dynamically generated content in your web page such as a DHTML menu and you want to view the generated code then you can not see it using View Source but you can display it using the Javascript command :

alert(document.documentElement.innerHTML);

I tend to not use alert but open a new window and redirect the output to that window.  This leads to many other interesting debugging possiblities.

Update:

Here is the Javascript function for outputting  the results to a new window:

function newWin(){
win= window.open('','_blank');

var results =document.documentElement.innerHTML;
var match = "<";

var re = new RegExp("<", "g");

var newresults = results.replace(re, "&lt;");

win.document.write(newresults );
}

Posted: Oct 10 2003, 03:34 PM by MartinSp | with 9 comment(s)
Filed under:

Comments

Marcus said:

Hi:

That's a good aproach, but when i redirect the output to new window, it show me the prior generated text and then it regenerate new text from the same script block.

Test it

<html>
<body>
<script janguage="javascript">
document.write("This is a" + "concatenation test" + "<BR>");
function newWin(){
ven = window.open('','name','');
ven.document.write(document.documentElement.innerHTML);
}
</script>
<a href="#" onClick="javascript:newWin();">Test</a>
</body>
</html>
# October 10, 2003 12:31 PM

Martin Spedding said:

Try this and it will work they way you expect:

<html>
<body>
<script janguage="javascript">
document.write("This is a" + "concatenation test" + "<BR>");
function newWin(){
ven = window.open('','_blank');

var results =document.documentElement.innerHTML;
var match = "<";

var re = new RegExp("<", "g");

var newresults = results.replace(re, "&lt;");

ven.document.write(newresults );
}
</script>
<a href="#" onClick="javascript:newWin();">Test</a>
</body>
</html>
# October 10, 2003 5:21 PM

Ruchi said:

fdg
# January 21, 2004 12:22 AM

adfasdfasdf said:

sdfgsdfgd
# January 26, 2004 4:50 PM

kkkkk said:

<SCRIPT LANGUAGE="JavaScript">
<!-- script start


if ($date != null)
var date = $date;

document.write("<center>Date of Patient Data:" + date + "</center>");
//-->
</SCRIPT>
# February 9, 2004 1:19 PM

j said:

j
# March 3, 2004 1:49 AM

fsdf said:

sdf
# April 18, 2004 1:12 PM

roche said:

como vas
# May 27, 2004 11:48 AM

Rebecca Long said:

My husband (mostly) and I (a little) wrote a JavaScript widget that will display a progress bar related to knitting goals (in the sidebar of my blog, it's the Stash Knit Down widget).  The problem is, some knitbloggers use WordPress which doesn't allow JavaScript.

We thought that if we could grab the HTML that the script generates, the WordPress knitbloggers could paste that HTML into their blog templates (instead of the HTML code that calls the script).  The alert method you give above works, but I can't figure out how to copy the generated code out of the alert that pops up.  I'd like to try the function newWin() method, but I can't figure out where in the script it goes (or perhaps it goes in more than one place).  In your example, the function newWin() goes in the HTML along with the script, but in our case, the script is called by the HTML (the script itself is in a different file).

I obviously don't know what I'm doing, my husband is sick of the whole project, and I've got WordPress knitbloggers clamboring for this widget.  Any help would be most appreciated.  I'd be happy to send you the files if you'd need to see them and have the time.  Or you could view source on my sidebar to get the code that way.  Thank you immensely.

# December 7, 2007 3:43 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)