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

StackOverflow https://stackoverflow.com/questions/817218

Question

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

document.documentElement.??
Était-ce utile?

La solution

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

Selon MDN , <=> est pris en charge dans 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. <=> se trouve dans la spécification de la analyse syntaxique et de la sérialisation .

Voir quirksmode pour connaître la compatibilité de votre navigateur avec ce qui fonctionnera pour vous. Tous soutiennent <=>. 

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

Autres conseils

Vous pouvez faire 

new XMLSerializer().serializeToString(document)

dans les navigateurs plus récents que IE 9

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

Je pense que document.documentElement.outerHTML devrait vous rendre cela.

Selon MDN , outerHTML est pris en charge dans 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. <=> se trouve dans la spécification de la analyse syntaxique et de la sérialisation .

La page MSDN dans la <=> propriété note qu'il est pris 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 les autres fonctionnalités DOM également).

J'ai essayé les différentes réponses pour voir ce qui est renvoyé. J'utilise la dernière version de Chrome.

La suggestion document.documentElement.innerHTML; renvoyée <head> ... </body>

La suggestion de Gaby document.getElementsByTagName('html')[0].innerHTML; a donné la même chose.

La suggestion document.documentElement.outerHTML; renvoyée <html><head> ... </body></html> qui est tout sauf le «doctype».

Vous pouvez récupérer l'objet doctype avec document.doctype; Ceci renvoie un objet, pas une chaîne. Par conséquent, si vous devez extraire les détails sous forme de chaînes pour tous les doctypes jusqu'au format HTML5, procédez comme suit: Obtenir un type de document d'un code HTML sous forme de chaîne avec Javascript

Je ne voulais que HTML5, les éléments suivants me suffisaient donc pour créer le document entier:

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

Vous pouvez également faire: 

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

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

document.documentElement.outerHTML

PROBABLEMENT UNIQUEMENT 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 fonctionner en FF. (Affiche les 300 premiers caractères du début du texte source, principalement des définitions de type doctype.)

MAIS, soyez conscient que le & "Enregistrer sous &"; le dialogue de FF normal NE POURRA PAS enregistrer l'état actuel de la page, mais le X / h / tml-source-text chargé à l'origine! ! (Un POST-up de ss dans un fichier temporaire et une redirection vers celui-ci peuvent 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 inclusion NICE des états / valeurs sur " Save (as) ... " pour les champs de type entrée, textarea , etc., pas pour les éléments de contenteditable / designMode ...

Si ce n'est pas un xhtml- resp. xml-file (type mime, PAS simplement extension de nom de fichier!), on peut utiliser document.open/write/close pour FIXER 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 l'attribut src-attrib d'un iframe (script-made!?), - pour accéder à un document iframes dans FF:

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

document.documentElement.innerHTML

j'utilise toujours 

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

Probablement pas le bon chemin mais je peux le comprendre quand je le vois.

Utilisez document.documentElement.

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

Pour obtenir également des éléments en dehors de <html>...</html>, et plus particulièrement 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 le nom document-outerhtml sur npm.

edit Notez que le code ci-dessus dépend d’une fonction doctypeToString; sa mise en œuvre 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
}

J'ai juste besoin de doctype html et cela 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>

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

dans VBA, cela ressemble à ceci 

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

utilisant ceci, vous permet d’obtenir tous les éléments de la page Web, y compris < ! DOCTYPE & Gt; noeud s'il existe

La manière correcte est en réalité:

webBrowser1.DocumentText

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top