web-dev-qa-db-fra.com

Comment obtenir le document HTML entier en tant que chaîne?

JS existe-t-il un moyen d’obtenir le code HTML complet dans les balises html sous forme de chaîne?

document.documentElement.??
javascripthtmldocumenttostring
194
Robinicks

MS a ajouté les propriétés outerHTML et innerHTML il y a quelque temps.

Selon MDN , outerHTML est pris en charge par Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile et Safari Mobile. outerHTML est dans la spécification DOM Parsing and Serialization .

Voir quirksmode pour la compatibilité du navigateur pour ce qui fonctionnera pour vous. Tous supportent innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);
266
Colin Burnett

Tu peux faire

new XMLSerializer().serializeToString(document)

dans les navigateurs plus récents que IE 9

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

49
Erik Aigner

Je crois que document.documentElement.outerHTML devrait vous le retourner.

Selon MDN , outerHTML est pris en charge par Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile et Safari Mobile. outerHTML est dans la spécification DOM Parsing and Serialization .

La page MSDN de la propriété outerHTML indique qu'elle est prise en charge dans IE 5+. La réponse de Colin renvoie à la page Quirksmode du W3C, qui offre une bonne comparaison de la compatibilité entre navigateurs (pour d'autres fonctionnalités DOM également).

40
Noldorin

Vous pouvez aussi faire:

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

Vous n'obtiendrez pas le tag Doctype ou html, mais tout le reste ...

9
Hakan
document.documentElement.outerHTML
5
Brian Campbell

PROBABLEMENT SEULEMENT IE:

>     webBrowser1.DocumentText

pour FF à partir de 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));

peut travailler en FF. (Affiche les 300 premiers caractères du début du texte source, principalement des définitions de type de type.)

MAIS, soyez conscient que le dialogue "Enregistrer sous" normal de FF NE POURRA PAS enregistrer l'état actuel de la page, mais plutôt le texte X/h/tml-source-chargé initialement !! (un POST up de ss dans un fichier temporaire et une redirection vers celui-ci pourrait fournir un texte source sauvegardable AVEC les modifications/modifications apportées auparavant.)

Bien que FF surprenne par une bonne récupération sur "retour" et une belle inclusion d'états/valeurs dans "Enregistrer (en) ..." pour les champs de type entrée, textarea etc., pas sur les éléments de contenteditable/designMode. ..

Si ce n'est pas un xhtml- resp. xml-file (type mime, pas seulement extension de nom de fichier!), on peut utiliser document.open/write/close pour SET le appr. contenu de la couche source, qui sera sauvegardé dans la boîte de dialogue de sauvegarde de l'utilisateur à partir du menu Fichier/Enregistrer de FF . voir: http://www.w3.org/MarkUp/2004/xhtml -faq # docwrite resp.

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

Neutre aux questions de X (ht) ML, essayez un "view-source: http: // ..." comme valeur de src-attrib d'un iframe (script-made !?), - pour accéder à un iframes- document en FF: 

<iframe-elementnode>.contentDocument, voir google "mdn contentDocument" pour appr. membres, comme 'textContent' par exemple. 'Vous avez cela il y a des années et vous ne voulez pas vraiment le chercher Si vous avez toujours un besoin urgent, mentionnez ceci, que je dois plonger dans ...

4
dos
document.documentElement.innerHTML
2
cherouvim

J'ai juste besoin de doctype html et devrait fonctionner correctement dans IE11, Edge et Chrome. J'ai utilisé le code ci-dessous cela fonctionne très bien.

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

et dans votre balise d'ancrage utilisez comme ceci.

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

Exemple 

    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>

0
kiranvj

Vous devez parcourir le document childNodes et obtenir le contenu outerHTML.

dans VBA il ressemble à ceci

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

en utilisant ceci, vous permet d'obtenir tous les éléments de la page Web, y compris le noeud <! DOCTYPE> s'il existe

0
milevyo

Utilisez document.documentElement.

Même question répondu ici: https://stackoverflow.com/a/7289396/2164160

0
Veer En

Pour obtenir également des éléments en dehors du <html>...</html>, et surtout de la déclaration <!DOCTYPE ...>, vous pouvez parcourir document.childNodes en les transformant chacun en chaîne:

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

J'ai publié ce code sous la forme document-outerhtml sur npm.

edit Notez que le code ci-dessus dépend d'une fonction doctypeToString; son implémentation pourrait être la suivante (le code ci-dessous est publié sur npm sous la forme 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
}

0
Gerben

J'utilise toujours

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

Probablement pas la bonne façon mais je peux le comprendre quand je le vois.

0
gaby de wilde