Qual è la differenza tra "Fonte" e "Fonte generata" in Firefox?Qual è la differenza tra "Fonte" e "Fonte generata"?
Si prega di spiegare con l'esempio.
Edit:3 luglio
Quale fonte "Motore di ricerca" utilizza, generata o prima generato?
Fonte mostrerà la fonte che la pagina è stata caricata con (servita dal server).
La sorgente generata disegnerà 'codice sorgente' dagli attuali elementi DOM e quindi include elementi creati dinamicamente da JavaScript.
Per esempio, fonte mostrerebbe:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Source</div>
</html>
e sorgente generato sarebbe 'disegnare' la fonte al momento si fa clic su 'Visualizza sorgente generato', dopo di che il contenuto del div sono state modificate, e si farebbe vedi:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Generated Content</div> <!-- Note the difference here -->
</html>
L'origine della vista mostra la sorgente servita dal server.
View generato fonte mostrerà il codice sorgente di ciò che è effettivamente dimostrato - che comprende ciò che è cambiato JavaScript, ecc
ok allora significa è solo relativo al linguaggio lato server e client. CSS e HTML saranno gli stessi in "Source" e "Generated Source" –
No, un esempio di sorgente generata sarebbe una chiamata AJAX a un servizio Web che aggiorna il testo in un div. La sorgente generata mostrerebbe ciò che è attualmente sullo schermo in cui la sorgente mostrerebbe ciò che inizialmente caricato quando la pagina è stata richiesta. –
@Durilai - Potresti prendere qualche esempio dal vivo, quindi spiegare con un esempio? Grazie –
È davvero molto semplice.
Fonte:
<body>
<script>document.write("hello, world");</script>
</body>
sorgente generato:
<body>
<script>document.write("hello, world");</script>
hello, world
</body>
Più verbosely: "fonte" è ciò che arriva al browser in risposta alla richiesta di pagina. "La fonte generata" è ciò che il browser ha dopo tutti gli incendi di javascript.
quindi è solo relativo a javascript. html e css saranno gli stessi sia in "Source" che in "Generated Source" –
No, qualsiasi CSS o HTML scritto da Javascript è nella sorgente generata. – Jacob
Il termine "sorgente generata" è un termine improprio, poiché ciò che stai vedendo non è affatto "fonte". "Origine" è l'HTML inviato al browser. "Sorgente generata" è la serializzazione dello stato corrente del modello di oggetto risultante dall'analisi del sorgente più le successive modifiche a tale modello di oggetto a causa dell'applicazione dello script. Le altre risposte hanno parlato di javascript, ma l'effetto del parser non dovrebbe essere scontato.
Considerate questa fonte:
<title>My Test Example</title>
<table>
<tr>
<td>Hello</td>
<div>There</div>
</table>
La sorgente generato (dopo l'aggiunta di alcuni spazi bianchi per chiarezza) è:
<html>
<head>
<title>My Test Example</title>
</head>
<body>
<div>There</div>
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
</tbody>
</table>
</body>
</html>
Vedi come html, testa, corpo e apertura tbody e chiusura tag sono stati aggiunto dal parser, è stato aggiunto anche il tag tr di chiusura. Inoltre, il div è stato spostato prima del tavolo.
"visualizza sorgente" mostra il codice effettivo nel file, come se avessi aperto il file in un editor di testo.
'visualizza origine generata' mostra come il browser lo visualizza sullo schermo, dopo che è stato eseguito lo script lato server (Javascript, PHP ecc.).
quindi se si sta index.html avuto un vuoto div e un image.jpg è stato 'ajaxed' in questo div utilizzando Javascript, quindi 'fonte di vista' vi mostrerà
<div></div>
ma 'vista generato source' ti mostrerà
<div><img src="image.jpg"/></div>
solo una nota: egin firefox, non hai questa voce di menu. tuttavia, è possibile controllare la sorgente generata selezionando tutto nella pagina (ctrl-a), quindi fare clic con il tasto destro del mouse -> "visualizzare la fonte di selezione" – mykhal
@mykhal - sì questa è una schermata di "Web Developer Toolbar" –