What is the difference between "Source" and "Generated Source"?
Please explain with example.
Edit: 3 July
Which source "Search engine" uses, Generated or before generated?
+4
A:
View source will show the source that was served by the server.
View generated source will show the source code of what's actually being shown — that includes what JavaScript has changed, etc.
icktoofay
2010-07-02 05:38:01
ok then it means it's only related to server and client side language. CSS and HTML will be the same in "Source" and "Generated Source"
metal-gear-solid
2010-07-02 05:41:21
No, an example of generated source would be a AJAX call to a web service that updates text in a div. The generated source would show what is currently on screen where the source would show what initially loaded when the page was requested.
Dustin Laine
2010-07-02 05:42:01
@Durilai - Could u please take any live example then explain with example? Thanks
metal-gear-solid
2010-07-02 05:45:24
+2
A:
Source will show the source that the page was loaded with (served by the server).
Generated source will draw 'source code' from the current DOM elements, and therefore includes elements dynamically created by JavaScript.
For example, source would show:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Source</div>
</html>
and Generated Source would 'draw' the source at the time you click 'View Generated Source', after which the div's contents have been changed, and you would see:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Generated Content</div> <!-- Note the difference here -->
</html>
Jon Weers
2010-07-02 05:38:19
+2
A:
It's really pretty simple.
Source:
<body>
<script>document.write("hello, world");</script>
</body>
Generated source:
<body>
<script>document.write("hello, world");</script>
hello, world
</body>
More verbosely: "source" is what arrives at the browser in response to the page request. "Generated source" is what the browser has after all the javascript fires.
egrunin
2010-07-02 05:52:33
so it's only related to javascript. html and css will be the same in both "Source" and "Generated Source"
metal-gear-solid
2010-07-02 06:15:50
+2
A:
The term "Generated Source" is a misnomer, since what you're seeing isn't "source" at all. "Source" is the HTML sent to the browser. "Generated Source" is the serialization of the current state of the object model resulting from the parsing of the source plus subsequent changes to that object model due to the application of script. The other answers have discussed javascript, but the effect of the parser should not be discounted.
Consider this source:
<title>My Test Example</title>
<table>
<tr>
<td>Hello</td>
<div>There</div>
</table>
The generated source (after adding some whitespace for clarity) is:
<html>
<head>
<title>My Test Example</title>
</head>
<body>
<div>There</div>
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
</tbody>
</table>
</body>
</html>
See how html, head, body and tbody opening and closing tags have been added by the parser, likewise the closing tr tag has been added. In addition, the div has been moved to before the table.
Alohci
2010-07-02 08:24:22
A:
'view source' shows you the actual code in your file, as if you've opened the file in a text-editor.
'view generated source' shows you how the browser renders it on screen, after all the server side script (Javascript, PHP etc.) has been executed.
so if you're index.html had an empty div and an image.jpg was 'AJAXed' into this div using Javascript, then 'view source' will show you
<div></div>
but 'view generated source' will show you
<div><img src="image.jpg"/></div>
pixeltocode
2010-07-02 09:42:34