Was ist der Unterschied zwischen "Quelle" und "Generierte Quelle" in Firefox?Was ist der Unterschied zwischen "Source" und "Generated Source"?
Bitte erläutern Sie mit Beispiel.
Edit:3. Juli
Welche Quelle "Suchmaschine" verwendet, generiert oder vor generiert?
Quelle die Quelle zeigt, dass die Seite mit geladen wurde (vom Server bedient).
Die generierte Quelle zeichnet den Quellcode aus den aktuellen DOM-Elementen und enthält daher dynamisch von JavaScript erstellte Elemente.
Zum Beispiel würde Quelle zeigen:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Source</div>
</html>
und generiert Quelle würden Sie ‚ziehen‘ die Quelle zu der Zeit klicken Sie auf ‚Ansicht generiert Source‘, wonach der Inhalt des div verändert wurden, und würden Sie siehe:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Generated Content</div> <!-- Note the difference here -->
</html>
Quelltext anzeigen zeigt die Quelle an, die vom Server bedient wurde.
Ansicht erzeugte Quelle wird den Quellcode zeigen, was tatsächlich gezeigt wird - das beinhaltet, was JavaScript geändert hat, usw.
ok dann heißt es Es bezieht sich nur auf Server- und Client-Sprache. CSS und HTML sind in "Quelle" und "Generierte Quelle" identisch. –
Nein, ein Beispiel für eine generierte Quelle wäre ein AJAX-Aufruf an einen Webdienst, der Text in einem div aktualisiert. Die generierte Quelle würde zeigen, was gerade auf dem Bildschirm ist, wo die Quelle anzeigen würde, was ursprünglich geladen wurde, als die Seite angefordert wurde. –
@Durilai - Könnten Sie bitte ein Live-Beispiel nehmen und es dann mit einem Beispiel erklären? Danke –
Es ist wirklich ziemlich einfach.
Quelle:
<body>
<script>document.write("hello, world");</script>
</body>
generiert Quelle:
<body>
<script>document.write("hello, world");</script>
hello, world
</body>
Mehr verbosely: "Quelle" ist das, was als Reaktion auf die Seite Anfrage an den Browser kommt. "Generierte Quelle" ist, was der Browser nach allen Javascript-Bränden hat.
, also ist es nur auf Javascript bezogen. html und css sind in "Quelle" und "Generierte Quelle" gleich. –
Nein, CSS oder HTML, die von Javascript geschrieben wurden, sind in der generierten Quelle enthalten. – Jacob
Der Begriff "generierte Quelle" ist eine falsche Bezeichnung, da das, was Sie sehen, keine "Quelle" ist. "Quelle" ist der HTML-Code, der an den Browser gesendet wird. "Generierte Quelle" ist die Serialisierung des aktuellen Zustands des Objektmodells, die sich aus dem Parsen der Quelle ergibt, sowie nachfolgender Änderungen an diesem Objektmodell aufgrund der Anwendung von Skript. Die anderen Antworten haben Javascript diskutiert, aber die Wirkung des Parsers sollte nicht vernachlässigt werden.
Betrachten Sie diese Quelle:
<title>My Test Example</title>
<table>
<tr>
<td>Hello</td>
<div>There</div>
</table>
Die erzeugte Quelle (nach einigen Leerzeichen, um Klarheit Zugabe) ist:
<html>
<head>
<title>My Test Example</title>
</head>
<body>
<div>There</div>
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
</tbody>
</table>
</body>
</html>
Sehen Sie, wie html, Kopf, Körper und tbody Öffnen und Schließen-Tags waren hinzugefügt durch den Parser, wurde ebenfalls das schließende tr-Tag hinzugefügt. Außerdem wurde das div vor den Tisch verschoben.
'Quelle anzeigen' zeigt den tatsächlichen Code in Ihrer Datei an, als ob Sie die Datei in einem Texteditor geöffnet haben.
'Ansicht generierte Quelle' zeigt Ihnen, wie der Browser es auf dem Bildschirm rendert, nachdem alle serverseitigen Skript (Javascript, PHP usw.) ausgeführt wurde.
also, wenn Sie eine leere index.html div und ein image.jpg hatte, war ‚AJAXed‘ in diese div Javascript verwenden, dann wird ‚Quelltext anzeigen‘ zeigen Sie
<div></div>
aber ‚Ansicht erzeugt source‘ wird Ihnen zeigen
<div><img src="image.jpg"/></div>
nur eine Anmerkung: egin firefox, Sie haben diesen Menüpunkt nicht. Sie können jedoch die generierte Quelle auswählen, indem Sie alles auf der Seite auswählen (Strg-a), dann mit der rechten Maustaste -> "Auswahlquelle anzeigen" – mykhal
@mykhal - ja das ist ein Screenshot von "Web Developer Toolbar" –