¿Cómo obtener todo el documento HTML como una cadena?

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

Pregunta

¿Hay alguna manera en JS de obtener el HTML completo dentro del HTML etiquetas, como una cadena?

document.documentElement.??
¿Fue útil?

Solución

MS agregó el outerHTML y innerHTML propiedades hace algún tiempo.

De acuerdo a MDN, outerHTML es compatible con Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile y Safari Mobile. outerHTML está en el Análisis y serialización de DOM especificación.

Ver en modo capricho para la compatibilidad del navegador para saber qué funcionará para usted.Todo el apoyo innerHTML.

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

Otros consejos

Puedes hacer 

new XMLSerializer().serializeToString(document)

en navegadores más nuevos que IE 9

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

Creo que document.documentElement.outerHTML debería devolvérselo.

Según MDN , outerHTML es compatible con Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile y Safari Mobile. <=> está en la especificación de análisis y serialización DOM .

La página MSDN en la <=> propiedad señala que es compatible con IE 5+. La respuesta de Colin enlaza con la página W3C quirksmode, que ofrece una buena comparación de compatibilidad entre navegadores (también para otras funciones DOM).

Probé las diferentes respuestas para ver qué se devuelve. Estoy usando la última versión de Chrome.

La sugerencia document.documentElement.innerHTML; devolvió <head> ... </body>

La sugerencia de Gaby document.getElementsByTagName('html')[0].innerHTML; devolvió lo mismo.

La sugerencia document.documentElement.outerHTML; devolvió <html><head> ... </body></html> que es todo aparte del 'doctype'.

Puede recuperar el objeto doctype con document.doctype; Esto devuelve un objeto, no una cadena, por lo que si necesita extraer los detalles como cadenas para todos los doctypes hasta HTML5 incluido, se describe aquí: Obtenga DocType de un HTML como cadena con Javascript

Solo quería HTML5, así que lo siguiente fue suficiente para crear el documento completo:

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

También puedes hacer: 

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

No obtendrá la etiqueta Doctype o html, pero todo lo demás ... 

document.documentElement.outerHTML

PROBABLEMENTE SOLO IE: 

>     webBrowser1.DocumentText

para FF desde 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));

puede funcionar en FF. (Muestra los PRIMEROS 300 caracteres desde el principio del texto fuente, principalmente doctype-defs).

PERO tenga en cuenta que el " Save As " -Dialog de FF NO PUEDE guardar el estado actual de la página, ¡sino el X / h / tml-source-text cargado originalmente! ! (un POST-up de ss a algún archivo temporal y redirigirlo a ese podría entregar un texto fuente guardable CON los cambios / ediciones previamente realizados)

Aunque FF sorprende por una buena recuperación en " back " y una NICE inclusión de estados / valores en " Guardar (como) ... " para CAMPOS de entrada, área de texto etc., no en elementos en contenteditable / designMode ...

Si NO es un xhtml- resp. archivo xml (tipo mime, ¡NO solo extensión de nombre de archivo!), se puede usar document.open/write/close para CONFIGURAR la aplicación. contenido a la capa de origen, que se guardará en el diálogo de guardar del usuario desde el menú Archivo / Guardar de FF. ver: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

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

Neutral para las preguntas de X (ht) ML, intente con " view-source: http: // ... " como el valor de src-attrib de un iframe (hecho por script !?), para acceder a un documento de iframes en FF:

<iframe-elementnode>.contentDocument, vea google " mdn contentDocument " por aprox. miembros, como 'textContent' por ejemplo. Lo tengo hace años y no me gusta arrastrarme por él. Si todavía es una necesidad urgente, mencione esto, que pude sumergirme en ... 

document.documentElement.innerHTML

Siempre uso 

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

Probablemente no sea el camino correcto, pero puedo entenderlo cuando lo veo.

Use document.documentElement.

La misma pregunta respondida aquí: https://stackoverflow.com/a/7289396/2164160

Para obtener también elementos fuera de <html>...</html>, lo más importante de la declaración <!DOCTYPE ...>, puede recorrer document.childNodes, convirtiendo cada uno en una cadena: 

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

Publiqué este código como document-outsidehtml en npm.

editar Tenga en cuenta que el código anterior depende de una función doctypeToString; su implementación podría ser la siguiente (el código a continuación se publica en npm como 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
}

Solo necesito doctype html y debería funcionar bien en IE11, Edge y Chrome. Utilicé el siguiente código, funciona 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');
    }
}

y en su etiqueta de anclaje use así. 

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

Ejemplo 

    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>

Debe iterar a través del documento childNodes y obtener el contenido externo HTML.

en VBA se ve así 

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

con esto, le permite obtener todos los elementos de la página web, incluidos < ! DOCTYPE & Gt; nodo si existe

La forma correcta es en realidad:

webBrowser1.DocumentText

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top