Wie erhalte ich das gesamte Dokument-HTML als Zeichenfolge?

236

Gibt es in JS eine Möglichkeit, den gesamten HTML-Code innerhalb der HTML- Tags als Zeichenfolge abzurufen?

document.documentElement.??
javascript  html  document  tostring 
— Der Blitz
quelle
10
Die einzig richtige Antwort: stackoverflow.com/questions/817218/… ( Hör auf, innere / äußere HTML-Antworten abzustimmen, sie liefern NICHT die gesamte Quelle! )
— John
2
document.body.parentElement.innerHTML
— Redwolf Programme
@ John was bieten sie nicht?
— Bluejayke

Antworten:

319

MS hat die Eigenschaften outerHTMLund vor innerHTMLeiniger Zeit hinzugefügt .

Nach MDN , outerHTMLwird in Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile und Safari Mobile unterstützt. outerHTMLbefindet sich in der DOM-Analyse- und Serialisierungsspezifikation .

Informationen zur Browserkompatibilität finden Sie unter quirksmode . Alle Unterstützung innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);
— Colin Burnett
quelle
28
OuterHTML erhält den Doctype nicht.
— CMCDragonkai
2
Lief wie am Schnürchen! Danke! Gibt es eine Möglichkeit, die Größe aller mit dem Dokument verknüpften Dateien einschließlich der JS- und CSS-Dateien zu ermitteln?
— www139
@CMCDragonkai: Sie können den Doctype separat abrufen und der Markup-Zeichenfolge voranstellen. Nicht ideal, ich weiß, aber möglich.
— Mike Branski
76

Du kannst tun

new XMLSerializer().serializeToString(document)

in Browsern, die neuer als IE 9 sind

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

— Erik Aigner
quelle
5
Dies war die erste richtige Antwort nach Datums- / Zeitstempeln. Teile der Seite wie die XML-Deklaration werden nicht berücksichtigt, und Browser bearbeiten den Code, wenn sie die anderen "Antworten" verwenden. Dies ist der einzige Beitrag, über den abgestimmt werden sollte (Dos wird drei Tage später veröffentlicht). Die Leute müssen aufpassen!
— John
2
Dies ist nicht ganz korrekt, da serializeToString eine HTML-Codierung ausführt. Wenn Ihr Code beispielsweise Stile enthält, die Schriftarten wie "Times New Roman", "Times" und "Serif" definieren, werden die Anführungszeichen in HTML codiert. Vielleicht ist das für einige von euch nicht wichtig, aber für mich ist es ...
— Marko
3
@ John nun, das OP fragt tatsächlich nach "dem gesamten HTML innerhalb der HTML-Tags". Und die ausgewählte beste Antwort von Colin Burnett erreicht dies. Diese spezielle Antwort (Eriks) enthält die HTML-Tags und den Doctype. Das heißt, dies war ein Rohdiamant für mich und genau das, wonach ich gesucht habe! Ihr Kommentar hat auch geholfen, weil ich mehr Zeit mit dieser Antwort verbracht habe, also danke :)
— evanrmurphy
2
Ich denke, die Leute sollten mit diesem vorsichtig sein, insbesondere weil es einen Wert zurückgibt, der nicht das tatsächliche HTML ist, das Ihr Browser empfängt. In meinem Fall wurden dem htmlTag Attribute hinzugefügt, die der Server nie gesendet hat :(
— onassar
1
Es wird in jedem Browser unterstützt. Wie ist diese schlechte Browserunterstützung?
— Erik Aigner
44

Ich glaube, das document.documentElement.outerHTMLsollte ich für Sie zurückgeben.

Nach MDN , outerHTMLwird in Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile und Safari Mobile unterstützt. outerHTMLbefindet sich in der DOM-Analyse- und Serialisierungsspezifikation .

Auf der MSDN-Seite in der outerHTMLEigenschaft wird darauf hingewiesen, dass sie in IE 5+ unterstützt wird. Colins Antwort verweist auf die W3C-Quirksmode-Seite, die einen guten Vergleich der Cross-Browser-Kompatibilität bietet (auch für andere DOM-Funktionen).

— Noldorin
quelle
Nicht alle Browser unterstützen dies.
— Colin Burnett
@Colin: Ja, guter Punkt. Aus Erfahrung scheine ich mich daran zu erinnern, dass sowohl IE 6+ als auch Firefox dies unterstützen, obwohl die von Ihnen verlinkte Quirksmode-Seite etwas anderes vorschlägt ...
— Noldorin
Firefox unterstützt OuterHTML nicht. Es ist IE proprietär. developer.mozilla.org/En/…
— Jesse Dearing
4
Gibt es eine Möglichkeit, alles abzurufen, einschließlich des Doctype und der HTML-Tags?
— Trusktr
1
Meins war eigentlich das erste. : P
— Noldorin
40

Ich habe die verschiedenen Antworten ausprobiert, um zu sehen, was zurückgegeben wird. Ich verwende die neueste Version von Chrome.

Der Vorschlag document.documentElement.innerHTML;kehrte zurück<head> ... </body>

Gabys Vorschlag document.getElementsByTagName('html')[0].innerHTML;gab dasselbe zurück.

Der Vorschlag document.documentElement.outerHTML;kehrte zurück, <html><head> ... </body></html> was alles außer dem "Doctype" ist.

Sie können das doctype-Objekt mit abrufen. document.doctype; Dies gibt ein Objekt zurück, keine Zeichenfolge. Wenn Sie also die Details als Zeichenfolgen für alle doctype-Typen bis einschließlich HTML5 extrahieren müssen, wird hier beschrieben: DocType eines HTML als Zeichenfolge mit Javascript abrufen

Ich wollte nur HTML5, daher reichte mir Folgendes, um das gesamte Dokument zu erstellen:

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

— paulo62
quelle
6
Dies ist die vollständigste Antwort und sollte akzeptiert werden. Ab 2016 ist die Browserkompatibilität vollständig und eine ausführliche Erwähnung (wie in der derzeit akzeptierten Antwort) ist nicht mehr erforderlich.
— Dan Dascalescu
10

Sie können auch tun:

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

Sie erhalten nicht das Doctype- oder HTML-Tag, sondern alles andere ...

— Hakan
quelle
4

Wahrscheinlich nur IE:

>     webBrowser1.DocumentText

für FF ab 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));

kann in FF arbeiten. (Zeigt die SEHR ERSTEN 300 Zeichen vom SEHREN Anfang des Quelltextes an, meistens Doctype-Defs.)

ABER beachten Sie, dass der normale "Speichern unter" -Dialog von FF möglicherweise NICHT den aktuellen Status der Seite speichert, sondern den ursprünglich geladenen X / h / tml-Quelltext !! (Ein POST-up von ss in eine temporäre Datei und eine Umleitung zu dieser kann einen speicherbaren Quelltext mit den zuvor vorgenommenen Änderungen / Bearbeitungen liefern.)

Obwohl FF durch eine gute Wiederherstellung auf "back" und eine NICE-Aufnahme von Zuständen / Werten in "Save (as) ..." für eingabeähnliche FELDER, Textbereiche usw. überrascht , nicht durch Elemente in contenteditable / designMode ...

Wenn NICHT ein xhtml- resp. XML-Datei (MIME-Typ, NICHT nur Dateinamenerweiterung!), kann man document.open/write/close verwenden, um die App zu setzen. Inhalt auf der Quellenebene, der im Speicherdialog des Benutzers über das Menü Datei / Speichern von FF gespeichert wird. siehe: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

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

Versuchen Sie neutral zu Fragen von X (ht) ML eine "Ansichtsquelle: http: // ..." als Wert des src-Attributs eines (vom Skript erstellten!?) Iframes, - um auf einen Iframes- zuzugreifen. Dokument in FF:

<iframe-elementnode>.contentDocument, siehe Google "mdn contentDocument" für ca. Mitglieder, wie zum Beispiel 'textContent'. »Das habe ich vor Jahren und möchte nicht danach kriechen. Wenn es immer noch dringend nötig ist, erwähne dies, damit ich eintauchen kann ...

— DOS
quelle
1

Verwenden Sie document.documentElement.

Dieselbe Frage wurde hier beantwortet: https://stackoverflow.com/a/7289396/2164160

— Veer En
quelle
Diese Frage sollte als ein Duplikat dieser viel älteren Frage geschlossen werden. Der interessante Teil ist jedenfalls, dass Sie das brauchen .outerHTMLund bekommen document.doctype, und die vollständigste Antwort ist die von Paolo .
— Dan Dascalescu
1

Um auch Dinge außerhalb der Deklaration <html>...</html>, vor allem der <!DOCTYPE ...>Deklaration, zu erhalten, können Sie document.childNodes durchgehen und jede in eine Zeichenfolge umwandeln:

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}`)
    }
}

Ich habe diesen Code als document-Outerhtml auf npm veröffentlicht.

Bearbeiten Beachten Sie, dass der obige Code von einer Funktion abhängt doctypeToString. Die Implementierung könnte wie folgt aussehen (der folgende Code wird auf npm als doctype-to-string veröffentlicht ):

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
quelle
0

Ich benutze immer

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

Wahrscheinlich nicht der richtige Weg, aber ich kann es verstehen, wenn ich es sehe.

— gaby de wilde
quelle
Dies ist falsch, da das <html...>Tag nicht zurückgegeben wird .
— Dan Dascalescu
0

Ich brauche nur Doctype HTML und sollte in IE11, Edge und Chrome gut funktionieren. Ich habe unten Code verwendet, es funktioniert gut.

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');
    }
}

und in Ihrem Ankertag so verwenden.

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

Beispiel

    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>
Erweitern Sie das Snippet

— kiranvj
quelle
0

Ich verwende outerHTMLfür Elemente (den <html>Hauptcontainer) und XMLSerializerfür alles andere, einschließlich <!DOCTYPE>zufälliger Kommentare außerhalb des <html>Containers oder was auch immer sonst dort sein könnte. Es scheint, dass Leerzeichen außerhalb des <html>Elements nicht beibehalten werden , daher füge ich standardmäßig Zeilenumbrüche mit hinzu 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));
Erweitern Sie das Snippet

— Sam Watkins
quelle
-2

Sie müssen das Dokument childNodes durchlaufen und den OuterHTML-Inhalt abrufen.

in VBA sieht es so aus

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

Auf diese Weise können Sie alle Elemente der Webseite abrufen, einschließlich des Knotens <! DOCTYPE>, falls vorhanden

— Milevyo
quelle
-9

Der richtige Weg ist eigentlich:

webBrowser1.DocumentText

— Damiano
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.