Comment obtenir le document HTML entier comme une chaîne de caractères?
y a-t-il un moyen dans JS pour obtenir le HTML entier dans les balises html , comme une chaîne de caractères?
document.documentElement.??
12 réponses
MS a ajouté les propriétés outerHTML et innerHTML il y a quelque temps.
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. outerHTML est dans la spécification DOM Parsing and Serialization .
Voir quirksmode pour compatibilité du navigateur pour ce qui fonctionnera pour vous. Tous les support innerHTML .
var markup = document.documentElement.innerHTML;
alert(markup);
je crois que document.documentElement.outerHTML devrait vous rendre ça.
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. outerHTML est dans la spécification DOM Parsing and Serialization .
La page MSDN sur le outerHTML propriété note qu'il est pris en charge dans IE 5+. La réponse de Colin est liée à la page quirksmode du W3C, qui offre une bonne comparaison de la compatibilité entre navigateurs (pour d'autres fonctionnalités DOM aussi).
Vous pouvez le faire
new XMLSerializer().serializeToString(document)
dans les navigateurs plus récents que IE 9.
j'ai essayé les différentes réponses pour voir ce qui est retourné. J'utilise la dernière version de Chrome.
La proposition document.documentElement.innerHTML; retourné <head> ... </body>
Gaby suggestion document.getElementsByTagName('html')[0].innerHTML; en retour le même.
La proposition document.documentElement.outerHTML; retourné <html><head> ... </body></html>
ce qui est tout sauf "doctype'.
vous pouvez récupérer l'objet doctype avec document.doctype; cela renvoie un objet, pas une chaîne, donc si vous avez besoin d'extraire les détails comme des chaînes pour tous les doctypes jusqu'à et y compris HTML5 il est décrit ici: Get DocType of an HTML as string avec Javascript
je voulais seulement HTML5, donc ce qui suit m'a suffi pour créer tout le document:
alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);
vous pouvez aussi faire:
document.getElementsByTagName('html')[0].innerHTML
vous n'obtiendrez pas la balise Doctype ou html, mais tout le reste...
PROBABLEMENT SEULEMENT IE:
> webBrowser1.DocumentText
pour les FF en hausse 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));
peuvent travailler dans des FF. (Affiche les 300 premiers caractères dès le début du texte source, surtout doctype-defs.)
mais sachez que la boîte de dialogue normale "Enregistrer sous"de FF ne peut pas enregistrer L'état actuel de la page, mais plutôt l'original chargé X/h/tml-source-text !! (un POSTE de ss pour certains temp de fichier et de les rediriger à qui pourrait livrez un texte source récupérable avec les modifications / modifications qui y ont été apportées.)
bien que FF surprenne par une bonne récupération sur " back "et une bonne inclusion des États/valeurs sur" Save (as) ..." pour l'entrée-comme des CHAMPS, textarea etc. , pas sur les éléments en mode contenu/ design...
Si ce N'est un xhtml - resp. fichier xml (mime-type, PAS seulement le nom de fichier de l'extension!), on peut utiliser le document.ouvrir/écrire/près de DÉFINIR le rapp. contenu de la source-couche, qui seront enregistrés l'utilisateur enregistrez-boîte de dialogue " Fichier/Enregistrer menu 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 une "view-source:http://..."comme la valeur de la src-attrib d'un (script!?) iframe,-pour accéder à un iframes-document en FF:
<iframe-elementnode>.contentDocument , voir google "mdn contentDocument" for apprr. membres, comme "textContent' par exemple.
'Ai que ans et pas comme à ramper. S'il y a encore un besoin urgent, mentionnez ceci, dans lequel je dois plonger ...
j'utilise toujours
document.getElementsByTagName('html')[0].innerHTML
probablement pas le bon chemin mais je peux le comprendre quand je le vois.
utiliser document.documentElement .
même question répondue ici: https://stackoverflow.com/a/7289396/2164160
pour obtenir aussi des choses en dehors du <html>...</html> , le plus important le <!DOCTYPE ...> déclaration, vous pouvez marcher à travers le document.childNodes, 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 comme document-outerhtml sur npm.