read javascript source

Question

In my html file I put as

<script src='http://otherdomain/file.js' ></script>

When I run my webpage, that other javascript creates some html content using docuemnt.write command.

How can I dynamically read that dynamic html using the javascript on my html page?

Is it possible?

Answer 1

If you just need to play around with the actual elements on the constructed page then you can use javascript to modify the DOM. (W3Schools has a tutorial)

For example, you can get a reference to a tag with id "myID" as follows:

myTag = document.getElementById("myID");

myTag.style = <new style>;
  etc.

---

If you want the raw HTML source of your new page you can call innerHTML:

myHTML = document.documentElement.innerHTML;

Answer 2

If you know where the other JavaScript writes its content it's easy to read it. If for example everything is written into the following div-container:

<div id="updatable"></div>

Then you could retrieve it by calling something like document.getElementById("updatable").childNodes or document.getElementById("updatable").innerHTML

Answer 3

You could overwrite document.write to just store the input and not write it. When you're done, restore it to normal behavior:

<script>
var outputBuffer = "", old = document.write;
document.write = function(buffer) {
    outputBuffer += buffer; // store the contents for later use
};
</script>
<script src="http://otherdomain.com/file.js"&gt;&lt;/script&gt;
<script>
document.write = old; // restore document.write to normal behavior
document.write(outputBuffer); // if you want to write it out
</script>

A working demo: http://jsbin.com/isuqi

Answer 4

If you don't need a solution that works on any browser but just for analyzing you might get what you want from mutation events.

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

Have a look at the DOMNodeInserted event. When you register a handler at the top document than you are called when ever someone is adding elements to your tree. For every action you might want there is an event type suitable. I'm not sure to which extent it is supported but might be worth trying

Answer 5

if you just want to do it for debugging purpose, then use IE web developer tool or firebug to view the generated source code. :)