¿Hay alguna manera en JS de obtener todo el HTML dentro de las etiquetas html , como una cadena?
document.documentElement.??
document.body.parentElement.innerHTML
¿Hay alguna manera en JS de obtener todo el HTML dentro de las etiquetas html , como una cadena?
document.documentElement.??
document.body.parentElement.innerHTML
Respuestas:
MS agregó las propiedades outerHTML
y innerHTML
hace algún tiempo.
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. outerHTML
está en la especificación de análisis y serialización DOM .
Vea quirksmode para la compatibilidad del navegador para lo que funcionará para usted. Todo el apoyo innerHTML
.
var markup = document.documentElement.innerHTML;
alert(markup);
Tu puedes hacer
new XMLSerializer().serializeToString(document)
en navegadores más nuevos que IE 9
html
etiqueta que el servidor nunca envió :(
Creo que document.documentElement.outerHTML
debería devolverte eso.
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. outerHTML
está en la especificación de análisis y serialización DOM .
La página de MSDN en la outerHTML
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 la compatibilidad entre navegadores (para otras funciones DOM también).
Intenté las diferentes respuestas para ver qué se devuelve. Estoy usando la última versión de Chrome.
La sugerencia document.documentElement.innerHTML;
regresó<head> ... </body>
La sugerencia de Gaby document.getElementsByTagName('html')[0].innerHTML;
devolvió lo mismo.
La sugerencia document.documentElement.outerHTML;
regresó, <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, por lo que lo siguiente fue suficiente para crear el documento completo:
alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);
document.documentElement.outerHTML
outerHTML
está en la especificación de análisis y serialización DOM .
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 diálogo "Guardar como" normal de FF NO PODRÍA 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 "Save (as) ..." 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 iframes- documento en FF:
<iframe-elementnode>.contentDocument
, consulte google "mdn contentDocument" para apr. 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, en el que tengo que sumergirme ...
Uso document.documentElement
.
Misma pregunta respondida aquí: https://stackoverflow.com/a/7289396/2164160
.outerHTML
y para obtener el document.doctype
, y la respuesta más completa es la de Paolo .
Para que las cosas también salgan de <html>...</html>
la <!DOCTYPE ...>
declaración, lo más importante , puede recorrer document.childNodes, convirtiendo cada una 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
}
Yo siempre uso
document.getElementsByTagName('html')[0].innerHTML
Probablemente no sea el camino correcto, pero puedo entenderlo cuando lo veo.
<html...>
etiqueta.
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>
Estoy usando outerHTML
para elementos (el <html>
contenedor principal ), y XMLSerializer
para cualquier otra cosa, incluidos <!DOCTYPE>
comentarios aleatorios fuera del <html>
contenedor, o cualquier otra cosa que pueda estar allí. Parece que el espacio en blanco no se conserva fuera del <html>
elemento, por lo que agrego nuevas líneas de forma predeterminada con sep="\n"
.
function get_document_html(sep="\n") {
let html = "";
let xml = new XMLSerializer();
for (let n of document.childNodes) {
if (n.nodeType == Node.ELEMENT_NODE)
html += n.outerHTML + sep;
else
html += xml.serializeToString(n) + sep;
}
return html;
}
console.log(get_document_html().slice(0, 200));