Wie das gesamte Dokument HTML als String zu bekommen?

https://stackoverflow.com/questions/817218

03-07-2019
|

Frage

Gibt es in JS eine Möglichkeit, die gesamte HTML innerhalb der html -Tags, als String zu bekommen?

document.documentElement.??

Lösung

MS hinzugefügt, um die outerHTML und innerHTML Eigenschaften vor einiger Zeit.

Nach MDN , outerHTML wird in Firefox 11 unterstützt , Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox mobile 11, IE mobile, Opera mobile und Safari mobile. outerHTML ist in der DOM Parsen und Serialisierung Spezifikation.

Siehe Quirksmode für Browser-Kompatibilität für das, was für Sie arbeiten. Alle Unterstützung innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);

Andere Tipps

Sie können tun,

new XMLSerializer().serializeToString(document)

in Browsern neuer als IE 9

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

Ich glaube, document.documentElement.outerHTML sollte, dass das Rück für Sie.

Die MSDN-Seite auf dem outerHTML Eigenschaft stellt fest, dass es im Internet Explorer 5+ unterstützt wird. Colin Antwort Links auf die W3C Quirksmode Seite, die einen guten Vergleich der Cross-Browser-Kompatibilität bietet (für anderen DOM bietet auch).

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

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

Gaby Vorschlag document.getElementsByTagName('html')[0].innerHTML; zurück gleich.

Der Vorschlag document.documentElement.outerHTML; zurück <html><head> ... </body></html> Das ist alles außer dem ‚Doctype‘.

Sie können die Doctype-Objekt abrufen mit document.doctype; ein Objekt Dies gibt nicht eine Zeichenfolge, wenn Sie also die Details als Strings für alle doctypes extrahieren müssen bis einschließlich HTML5 es ist hier beschrieben: Get DocType eines HTML als String mit Javascript

Ich wollte nur HTML5, so dass die folgende war genug für mich das gesamte Dokument zu erstellen:

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

Sie können auch tun:

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

Sie werden den Doctype oder HTML-Tag nicht, aber alles andere ...

document.documentElement.outerHTML

wohl nur IE:

>     webBrowser1.DocumentText

für FF bis 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 auf die ALLERERSTEN 300 Zeichen von Anfang an der Quelle-Text, meist doctype-defs.)

aber bewusst sein, dass die normalen „Speicher unter“ -Dialog von FF möglicherweise nicht den aktuellen Status der Seite speichern, sondern der originallly geladen X / h / tml-Source-Text !! (A POST-up von ss bis zu einem gewissen temp-Datei und Umleitung auf das könnte einen speicherbare Quelle-Text mit den Änderungen liefern / Änderungen an es vor gemacht.)

Obwohl FF Überraschungen durch eine gute Erholung auf „zurück“ und eine schöne Aufnahme von Staaten / Werten auf „Speichern (as) ...“ für die Eingabe ähnlicher FIELDS, TextArea- usw., nicht auf Elemente in contenteditable / designmode ...

Wenn nicht ein XHTML- resp. xml-Datei (Mime-Typ, nicht nur Dateinamen-Erweiterung!) kann man verwenden document.open/write/close die die Gene auf SET. Inhalt der Source-Schicht, die auf Benutzer-Speichern-Dialog aus der Datei / Speichern Menü von FF gespeichert werden. sehen: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

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

Neutral auf Fragen von X (ht) ML, versuchen, ein "view-source: http: // ..." als Wert des src-attrib eines (skript gemacht !?) iframe, - für den Zugriff ein iframes-Dokument in FF:

<iframe-elementnode>.contentDocument siehe google "mdn contentdocument" für ca. Mitglieder, wie ‚textcontent‘ zum Beispiel. ‚Haben Sie, dass vor Jahren und nicht wie es zu kriechen. Wenn nach wie vor dringender Bedarf, dies zu erwähnen, dass ich habe zu tauchen ...

document.documentElement.innerHTML

ich immer verwenden

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

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

Mit document.documentElement.

Das gleiche Frage beantwortet hier: https://stackoverflow.com/a/7289396/2164160

Um auch Dinge außerhalb des <html>...</html> zu bekommen, was am wichtigsten ist die <!DOCTYPE ...> Erklärung, Sie durch document.childNodes gehen können, die jeweils in einen String drehen:

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

I veröffentlicht diesen Code als dokumentenOuterHtml auf npm.

Bearbeiten Notieren Sie den Code oben hängt von einer Funktion doctypeToString; ihre Umsetzung könnte wie folgt aussehen (Code unten auf npm veröffentlicht als 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
}

Ich brauche nur HTML doctype und sollte in IE11, Kanten- und Chrome funktionieren. Ich verwendete Code unten, es funktioniert.

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 der Anker-Tag Verwendung wie diese.

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

Sie haben durch das Dokument childnodes iterieren und das Outerhtml-Gehalt zu bekommen.

in VBA es wie folgt aussieht

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

diese verwenden, können Sie alle Elemente der Webseite, einschließlich bekommen Knoten, wenn es vorhanden ist

Der richtige Weg ist eigentlich:

webBrowser1.DocumentText

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow