Como chegar todo o HTML documento como uma string?

https://stackoverflow.com/questions/817218

03-07-2019
|

Pergunta

Existe uma maneira de JS para obter todo o HTML dentro do html marcas, como uma string?

document.documentElement.??

Solução

MS adicionou as propriedades outerHTML e innerHTML há algum tempo.

De acordo com a MDN , outerHTML é suportado no Firefox 11 , Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox mobile 11, IE mobile, Opera mobile, e Safari mobile. outerHTML está na especificação DOM de análise e serialização .

quirksmode para compatibilidade do navegador para o que irá trabalhar para você. Todo o suporte innerHTML.

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

Outras dicas

Você pode fazer

new XMLSerializer().serializeToString(document)

em navegadores mais novos do que o IE 9

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

Eu acredito document.documentElement.outerHTML deve retornar isso para você.

A página MSDN sobre a outerHTML propriedade observa que é suportado no IE 5+. links de resposta de Colin para a página de W3C quirksmode, que oferece uma boa comparação de compatibilidade cross-browser (para outras DOM apresenta também).

Eu tentei as várias respostas para ver o que é retornado. Eu estou usando a versão mais recente do Chrome.

A sugestão document.documentElement.innerHTML; <head> ... </body> voltou

document.getElementsByTagName('html')[0].innerHTML; sugestão de Gaby voltou o mesmo.

O document.documentElement.outerHTML; sugestão voltou <html><head> ... </body></html> que é tudo além do 'doctype'.

Você pode recuperar o objeto doctype com document.doctype; Isso retorna um objeto, não uma string, por isso, se você precisa extrair os detalhes como cordas para todos os doctypes até e incluindo HTML5 é descrito aqui: Get DocType de um HTML como string com Javascript

Eu só queria HTML5, por isso, a seguinte foi o suficiente para mim para criar todo o documento:

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

Você também pode fazer:

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

Você não terá a tag Doctype ou html, mas tudo o resto ...

document.documentElement.outerHTML

provavelmente só IE:

>     webBrowser1.DocumentText

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

pode trabalhar em FF. (Aparece o primeiro 300 caracteres desde o início da fonte de texto, principalmente DOCTYPE-defs.)

Mas esteja avisado que o normal "Salvar como" -Dialog de FF pode não salvar o estado atual da página, em vez do originallly carregado X / h / tml-source-texto !! (A POST-up de ss a algum temp-arquivo e redirecionamento para que possam oferecer uma fonte de texto saveable com as modificações / edições feitas antes dele.)

Embora FF surpreende pela boa recuperação em "back" e uma inclusão agradável de estados / valores em "Salvar (as) ..." para entrada semelhante CAMPOS, textarea etc., e não em elementos em contenteditable / designMode ...

Se não for um resp xhtml-. xml-arquivo (mime-type, não apenas filename-extensão!), pode-se usar document.open/write/close a SET o a aprox. conteúdo para a camada de origem, que será guardada no usuário é salvar-de diálogo do Arquivo / Salvar menue de FF. Vejo: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

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

Neutral a questões de X (ht) ML, tente uma "visão-fonte: http: // ...", como o valor da src-attrib de um iframe (feito roteiro-!?), - ao acesso um iframe-documento no FF:

<iframe-elementnode>.contentDocument, ver o Google "MDN contentDocument" para aprox. membros, como 'textContent', por exemplo. 'Teve que anos atrás e não gosta de rastreamento para ele. Se ainda de necessidade urgente, mencionar isto, que eu comecei a mergulhar em ...

document.documentElement.innerHTML

Eu sempre uso

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

Provavelmente não o caminho certo, mas eu posso entender isso quando eu vê-lo.

Use document.documentElement.

mesma pergunta respondida aqui: https://stackoverflow.com/a/7289396/2164160

Para também fazer as coisas fora do <html>...</html>, o mais importante a declaração <!DOCTYPE ...>, você poderia andar através document.childNodes, transformando cada um em uma string:

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

I publicado este código como documento-outerHTML em npm.

editar Observe o código acima depende de uma doctypeToString função; sua implementação poderia ser a seguinte (código abaixo está publicada no NPM como doctype-a-corda ):

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
}

Eu só preciso doctype html e deve funcionar bem no IE11, Edge e Chrome. Eu usei o código abaixo funciona bem.

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

e em sua âncora uso tag como esta.

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

Exemplo

    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>

Você tem que percorrer a childNodes de documentos e obter o conteúdo outerHTML.

em VBA parece que este

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

usando isso, permite que você obtenha todos os elementos da página web, incluindo nó se existir

A maneira correta é realmente:

webBrowser1.DocumentText

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow