Come ottenere l'intero documento HTML come stringa?

237

Esiste un modo in JS per ottenere l'intero HTML all'interno dei tag HTML , come una stringa?

document.documentElement.??
javascript  html  document  tostring 
— Il flash
fonte
10
L'unica risposta corretta: stackoverflow.com/questions/817218/… ( smetti di votare le risposte HTML / interne / esterne, non forniscono l'intera fonte! )
— Giovanni
2
document.body.parentElement.innerHTML
— Programmi Redwolf,
@Giovanni cosa non forniscono?
— Bluejayke

Risposte:

320

MS ha aggiunto le proprietà outerHTMLe innerHTMLqualche tempo fa.

Secondo MDN , outerHTMLè supportato in Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile e Safari Mobile. outerHTMLè nelle specifiche DOM di analisi e serializzazione .

Vedi quirksmode per la compatibilità del browser per ciò che funzionerà per te. Tutto il supporto innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);
— Colin Burnett
fonte
28
outerHTML non ottiene il doctype.
— CMCDragonkai
2
ha funzionato come un fascino! grazie! c'è un modo per ottenere la dimensione di qualsiasi / tutti i file collegati al documento, inclusi i file js e css?
— www139,
@CMCDragonkai: è possibile ottenere il doctype separatamente e anteporlo alla stringa di markup. Non ideale, lo so, ma possibile.
— Mike Branski,
76

Tu puoi fare

new XMLSerializer().serializeToString(document)

nei browser più recenti di Internet Explorer 9

Vedi https://caniuse.com/#feat=xml-serializer

— Erik Aigner
fonte
5
Questa è stata la prima risposta corretta in base alla data / ora. Parti della pagina come la dichiarazione XML non saranno incluse e i browser manipoleranno il codice quando si usano le altre "risposte". Questo è l' unico post che dovrebbe essere votato (il DOS viene pubblicato tre giorni dopo). Le persone devono prestare attenzione!
— Giovanni,
2
Questo non è del tutto corretto poiché serializeToString esegue una codifica HTML. Ad esempio, se il tuo codice contiene stili che definiscono caratteri come "Times New Roman", Times, se le virgolette verranno codificate in HTML. Forse questo non è importante per alcuni di voi, ma per me lo è ...
— Marko,
3
@John bene l'OP in realtà chiede "l'intero HTML all'interno dei tag html". E la migliore risposta selezionata da Colin Burnett ci riesce. Questa risposta particolare (quella di Erik) includerà i tag html e il doctype. Detto questo, questo era totalmente un diamante grezzo per me ed esattamente quello che stavo cercando! Anche il tuo commento mi ha aiutato perché mi ha fatto passare più tempo con questa risposta, quindi grazie :)
— evanrmurphy,
2
Penso che le persone dovrebbero stare attenti a questo, in particolare perché restituisce un valore che non è l'html effettivo che il tuo browser riceve. Nel mio caso, ha aggiunto attributi al htmltag che il server non ha mai effettivamente inviato :(
— onassar
1
È supportato in ogni browser. In che modo questo scarso supporto per il browser?
— Erik Aigner
44

Credo document.documentElement.outerHTML dovrebbe restituirlo per te.

Secondo MDN , outerHTMLè supportato in Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile e Safari Mobile. outerHTMLè nel parsing e serializzazione DOM .

La pagina MSDN sulla outerHTMLproprietà nota che è supportato in IE 5+. La risposta di Colin si collega alla pagina quirksmode del W3C, che offre un buon confronto della compatibilità tra browser (anche per altre funzionalità DOM).

— Noldorin
fonte
Non tutti i browser supportano questo.
— Colin Burnett,
@Colin: Sì, buon punto. Per esperienza, mi sembra di ricordare che sia IE 6+ che Firefox lo supportano, sebbene la pagina quirksmode che hai collegato suggerisca diversamente ...
— Noldorin
Firefox non supporta OuterHTML. È di proprietà di IE. developer.mozilla.org/En/…
— Jesse Dearing,
4
C'è un modo per ottenere tutto, compresi i tag doctype e html?
— trusktr,
1
Il mio è stato il primo, in realtà. : P
— Noldorin,
40

Ho provato le varie risposte per vedere cosa viene restituito. Sto usando l'ultima versione di Chrome.

Il suggerimento è document.documentElement.innerHTML;tornato<head> ... </body>

Il suggerimento di Gaby ha document.getElementsByTagName('html')[0].innerHTML;restituito lo stesso.

Il suggerimento è document.documentElement.outerHTML;tornato <html><head> ... </body></html> che è tutto a parte il 'doctype'.

È possibile recuperare l'oggetto doctype con document.doctype; Questo restituisce un oggetto, non una stringa, quindi se è necessario estrarre i dettagli come stringhe per tutti i tipi di documento fino a HTML5 incluso, è descritto qui: Ottieni DocType di un HTML come stringa con Javascript

Volevo solo HTML5, quindi per creare l'intero documento era sufficiente quanto segue:

alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);

— paulo62
fonte
6
Questa è la risposta più completa e dovrebbe essere accettata. A partire dal 2016, la compatibilità del browser è completa e non è più necessario menzionarla in dettaglio (come nella risposta attualmente accettata).
— Dan Dascalescu,
10

Puoi anche fare:

document.getElementsByTagName('html')[0].innerHTML

Non otterrai il tag Doctype o html, ma tutto il resto ...

— Hakan
fonte
4

PROBABILMENTE SOLO IE:

>     webBrowser1.DocumentText

per FF da 1.0:

//serialize current DOM-Tree incl. changes/edits to ss-variable
var ns = new XMLSerializer();
var ss= ns.serializeToString(document);
alert(ss.substr(0,300));

potrebbe funzionare in FF. (Mostra i MOLTO PRIMI 300 caratteri dall'inizio MOLTO del testo sorgente, principalmente doctype-defs.)

MA sappiate che il normale "Salva con nome" -Dialog di FF POTREBBE NON salvare lo stato corrente della pagina, piuttosto il X / h / tml-source-text caricato originariamente !! (un POST-up di ss su alcuni file temporanei e il reindirizzamento a quello potrebbe fornire un testo sorgente salvabile CON le modifiche / modifiche precedentemente apportate ad esso.)

Sebbene FF sorprenda per un buon recupero su "back" e un'inclusione NICE di stati / valori su "Save (as) ..." per campi come input, textarea ecc., Non su elementi in contenteditable / designMode ...

Se NON è un xhtml- resp. file xml (tipo mime, NON solo estensione del nome file!), si può usare document.open/write/close per impostare l'app. contenuto nel livello sorgente, che verrà salvato nella finestra di dialogo di salvataggio dell'utente dal menu File / Salva di FF. vedi: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

https://developer.mozilla.org/en-US/docs/Web/API/document.write

Fermo con le domande di X (ht) ML, prova un "view-source: http: // ..." come valore dell'attributo src di un iframe (creato dallo script !?), - per accedere a un iframe- documento in FF:

<iframe-elementnode>.contentDocument, vedi google "mdn contentDocument" per appr. membri, ad esempio "textContent". 'Capito anni fa e non mi piace strisciare per questo. Se ho ancora urgente bisogno, menzionalo, in cui mi sono tuffato ...

— dos
fonte
1

Per ottenere anche cose al di fuori della <html>...</html>, soprattutto la <!DOCTYPE ...>dichiarazione, è possibile esplorare document.childNodes, trasformandoli in una stringa:

const html = [...document.childNodes]
    .map(node => nodeToString(node))
    .join('\n') // could use '' instead, but whitespace should not matter.

function nodeToString(node) {
    switch (node.nodeType) {
        case node.ELEMENT_NODE:
            return node.outerHTML
        case node.TEXT_NODE:
            // Text nodes should probably never be encountered, but handling them anyway.
            return node.textContent
        case node.COMMENT_NODE:
            return `<!--${node.textContent}-->`
        case node.DOCUMENT_TYPE_NODE:
            return doctypeToString(node)
        default:
            throw new TypeError(`Unexpected node type: ${node.nodeType}`)
    }
}

Ho pubblicato questo codice come document-outerhtml su npm.

modifica Nota il codice sopra dipende da una funzione doctypeToString; la sua implementazione potrebbe essere la seguente (il codice seguente è pubblicato su npm come doctype-to-string ):

function doctypeToString(doctype) {
    if (doctype === null) {
        return ''
    }
    // Checking with instanceof DocumentType might be neater, but how to get a
    // reference to DocumentType without assuming it to be available globally?
    // To play nice with custom DOM implementations, we resort to duck-typing.
    if (!doctype
        || doctype.nodeType !== doctype.DOCUMENT_TYPE_NODE
        || typeof doctype.name !== 'string'
        || typeof doctype.publicId !== 'string'
        || typeof doctype.systemId !== 'string'
    ) {
        throw new TypeError('Expected a DocumentType')
    }
    const doctypeString = `<!DOCTYPE ${doctype.name}`
        + (doctype.publicId ? ` PUBLIC "${doctype.publicId}"` : '')
        + (doctype.systemId
            ? (doctype.publicId ? `` : ` SYSTEM`) + ` "${doctype.systemId}"`
            : ``)
        + `>`
    return doctypeString
}

— Gerben
fonte
0

Lo uso sempre

document.getElementsByTagName('html')[0].innerHTML

Probabilmente non è il modo giusto, ma posso capirlo quando lo vedo.

— Gaby de Wilde
fonte
Questo non è corretto perché non restituirà il <html...>tag.
— Dan Dascalescu,
0

Ho solo bisogno di doctype html e dovrebbe funzionare bene in IE11, Edge e Chrome. Ho usato sotto il codice funziona bene.

function downloadPage(element, event) {
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
        document.execCommand('SaveAs', '1', 'page.html');
        event.preventDefault();
    } else {
        if(isChrome) {
            element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
        }
        element.setAttribute('download', 'page.html');
    }
}

e nel tuo tag anchor utilizzare in questo modo.

<a href="#" onclick="downloadPage(this,event);" download>Download entire page.</a>

Esempio

    function downloadPage(element, event) {
    	var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    
    	if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
    		document.execCommand('SaveAs', '1', 'page.html');
    		event.preventDefault();
    	} else {
    		if(isChrome) {
                element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
    		}
    		element.setAttribute('download', 'page.html');
    	}
    }
I just need doctype html and should work fine in IE11, Edge and Chrome. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>
<a href="#" onclick="downloadPage(this,event);"  download><h2>Download entire page.</h2></a></p>

<p>Some image here</p>

<p><img src="https://placeimg.com/250/150/animals"/></p>
Espandi frammento

— kiranvj
fonte
0

Sto usando outerHTMLper gli elementi (il <html>contenitore principale ) e XMLSerializerper qualsiasi altra cosa <!DOCTYPE>, inclusi commenti casuali all'esterno del <html>contenitore o qualsiasi altra cosa possa esserci. Sembra che gli spazi bianchi non siano conservati al di fuori <html>dell'elemento, quindi sto aggiungendo nuove righe di default con sep="\n".

function get_document_html(sep="\n") {
    let html = "";
    let xml = new XMLSerializer();
    for (let n of document.childNodes) {
        if (n.nodeType == Node.ELEMENT_NODE)
            html += n.outerHTML + sep;
        else
            html += xml.serializeToString(n) + sep;
    }
    return html;
}

console.log(get_document_html().slice(0, 200));
Espandi frammento

— Sam Watkins
fonte
-2

Devi iterare attraverso il documento childNodes e ottenere il contenuto outerHTML.

in VBA sembra così

For Each e In document.ChildNodes
    Put ff, , e.outerHTML & vbCrLf
Next e

usando questo, ti permette di ottenere tutti gli elementi della pagina web incluso il nodo <! DOCTYPE> se esiste

— milevyo
fonte
-9

Il modo corretto è in realtà:

webBrowser1.DocumentText

— Damiano
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.