DHTML Tutorial

Free JavaScript Editor DHTML Editor
↑

Main Page

14.18 Capturing Document Content

NN 6, IE 5

14.18.1 Problem

You want to grab a copy of the current HTML node tree, including any dynamic changes made to it by scripts.

14.18.2 Solution

The need for this feature most commonly occurs when you haven't prepared for it—for example, as an ad hoc debugging tool. Therefore, to get an emergency copy of the page's HTML, enter the following URL as one unbroken line into the Address/Location box of your browser:

javascript: void window.open("","","").document.write("<textarea cols=80 
rows=20>" + document.body.parentNode.innerHTML + "</textarea>")

This code produces a new window containing a single textarea element displaying all HTML inside the <html> and </html> tags of the page at that instant.

14.18.3 Discussion

When you use dynamic element creation, it frequently becomes difficult to know if a rendering problem is due to a browser problem or a problem in the document tree caused by your element modification scripts. Viewing the source in the browser isn't much help here, because that view tends to mimic only the page as delivered to the browser, without any of the dynamic modifications your scripts make to the page after it loads.

An ideal way to diagnose these kinds of problems is to isolate a copy of the HTML as the browser sees it, paste it into a test document, and then load that test document into the browsers for which you develop. Sometimes, simply viewing the HTML quickly reveals problems such as improperly closed container tags (more common if you use the IE HTML string modification methods than the W3C DOM node-modification methods), unbalanced elements in tables, or a missing attribute. But even if the problem is more elusive, it is far easier to work in a scriptless and stable HTML environment, experimenting with tags and attributes to find the combination that works as desired in all target browsers. Then you can go back to your content modification scripts to plug the holes in content creation routines.

The javascript: pseudo-URL shown in the Solution can be modified to provide a larger or smaller textarea element. Once you find a combination that works best for you, create a bookmark for this URL. This kind of active JavaScript bookmark is commonly called a bookmarklet. It works on pages retrieved from any server.

You can even use it in a frameset. Simply reference the frame in which you're interested:

javascript: void window.open("","","").document.write("<textarea cols=80 
rows=20>" + top.frames[1].document.body.parentNode.innerHTML + "</textarea>")

Be aware that IE for Windows may not produce all of the markup, particularly the head element contents, when the page is defined as a strictly XHTML file. You can experiment with the reference in the bookmarklet to point to the desired segment of the page you're looking at.

14.18.4 See Also

Recipe 14.17 for another way to examine a document's structure by walking the document node tree.

Main Page

→