0

I have following 2 files as below:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function init(){
document.getElementById("mytest").innerHTML= "Results after rendering...";
}

</script>
<body onload="init();"><div id="mytest">OK</div>
</body>
</html>

The second page usually give the alert popup all source code of first page.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
 xmlhttp.open("GET", "test.html",true);
 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
   alert(xmlhttp.responseText)
  }
 }
 xmlhttp.send(null)
</script>
<body>
</body>
</html>

All I want to do is I would like to get ONLY source code after rendering. How can get all code after rendering instead of getting all original code. So i can read < div id="mytest">Results after rendering...< / div> when I try with XMLHTTP. How can I do how to get the code which are already render for page, I want only with classic Javascript or DOM, I don't want with Jquery, JSON, Mootool at all. thanks in advance.

Improve this question
2
  • 1
    You can't. The change that the first one is making is to the DOM, not to the actual HTML file. So any subsequent request to that HTML file is going to get the original HTML, not the rendered version. What is it that you're trying to do specifically? Maybe there is another/better way. Commented Aug 22, 2011 at 16:17
  • i would like to fetch the specific content from a webpage which is rendered via JavaScript, So I am thinking how can I get render page codes instead of getting source code of HTML and JavaScript. Commented Aug 22, 2011 at 16:25

2 Answers 2

Reset to default
2

Instead of loading the page with ajax, use your browser's iframe support to your advantage.

Change the second file that alerts the HTML source to something like this:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script>
function displayAlert()
{
    alert(document.getElementById('iframe').contentDocument.body.innerHTML);
}
</script>
<body onload="displayAlert()">
<iframe src="test.html" id="iframe" style="display:none;"></iframe>
</body>
</html>

This will load test.html in an invisible iframe. Your browser will automatically render test.html inside the iframe and will call displayAlert() when it is done. displayAlert() will grab the the source code inside the iframe and alert it. However, this solution will only work if test.html is on the same server as the script above. If test.html is on a completely different server, this solution will not work because the permission to access the iframe will be denied. If this is the case, I can let you know of another solution that will bypass this.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I'm not sure I know what you're really asking, but why not just get:

alert(document.body.innerHTML);

to get the actual rendered body HTML with any changes that have been made by scripts upon loading.

Note: even unmodified parts of innerHTML will not always compare exactly to the original source HTML because in some cases browsers are reconstituting the innerHTML from some other parsed data form so attributes may not have the same quoting or be in the same order and capitalization may not be the same.

Improve this answer

4 Comments

let's pretend, first page is on third-party site, you can't modify at all, and that page has javascript to render the contents, so I am coding second page to get the source code of it, I only get real sourcecode, not the render version of it though. I am testing on Chrome, I like to get it done only for Chrome. I don't need others browsers to be compatible at all by now.
The rendered HTML only exists inside the DOM of a browser. That's the only place you can get it from. So, somehow you have to load it into a browser and get the innerHTML from that browser window.
'<script> window.onload = function dosomething(){ var myRequst = new XMLHttpRequest(); var url = "test.html"; myRequst.open('get', url); myRequst.onreadystatechange=function() { if (myRequst.readyState==4) { alert(myRequst.responseText) document.write(myRequst.responseText); alert(document.body.innerHTML); } } myRequst.send(null); } </script> ' I tired to load it into browser with above code, it doesn't work that way though, i think i am wrong in that coding.
You're trying to write an entire HTML document into your document.body with document.write(). That won't work. You could put it into a iframe if you want which is expecting an entire HTML document. But, HTML documents expect to be loaded from a particular location and many use relative paths so if it isn't being loaded from that same relative path, it may not work. FYI, you can't really put code into comments -it's not readable.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.