[RESOLVIDO] Capturar o código fonte de uma página (HTML), e guardá-lo em JAVASCRIPT. Em seguida, mostrar o código fonte em pop up

Front-end JavaScript
#1

Olá. Estou com uma dificuldade em capturar o código fonte de uma página e guardá-la em uma variável em JAVASCRIPT. Depois terei que mostrá-la em um pop up. Você poderiam me ajudar ?

#2

Tem dois modos simples de fazer isso, o primeiro é usar document.documentElement.innerHTML que retorna o HTML atual da página, mas você pode ter um inconveniente se o html da página estiver sendo alterado na máquina do cliente, este comando vai retornar o HTML no momento em que foi utilizado.

Uma outra solução é, caso a página tenha sido acessada por um GET você pode usar o window.location.href para pegar o endereço da página e fazer um ajax para pegar o HTML, neste caso, mesmo que o HTML tenha sido alterado no cliente, você recebe o primeiro HTML que o cliente recebeu.

Veja um exemplo dos dois casos.

<!DOCKTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
    </head>
    <body>
        <div id="container">
            <button id="pegarHTMLagora">pegar HTML agora</button>
            <button id="pegarHTMLinicial">pegar HTML inicial</button>
            <button id="alterarHTML">alterar HTML</button>
            <div id="alteravel"></div>
        </div>
        <script>
            $('#pegarHTMLagora').on('click', function () {
                var htmlAgora = document.documentElement.innerHTML; // Javascript vanilla (sem jquery)
                alert(htmlAgora);
            });
            $('#pegarHTMLinicial').on('click', function () {
                // window.location.href -> Javascript vanilla
                // $.get -> jquery
                $.get(window.location.href, function (html) {
                    var htmlAgora = html;
                    alert(htmlAgora);
                });
            });
            $('#alterarHTML').on('click', function () {
                $('#alteravel').append($('<p>Oi</p>'));
            });
        </script>
    </body>
</html>

Obs. aqui eu utilizei o Jquery carregado pelo site do jquery e esta página vai precisar estar em um web service para funcionar o ajax.

E um detalhe, em ambos os casos você terá problemas adicionais caso esteja trabalhando com frame ou iframe.

#3

Obrigado Murilo, pela postagem.
Pois é, estou usando o IFRAME.

Tens alguma ideia ?

Te agradeço.

#4

Opa! Problema resolvido.
O problema é que o IFRAME deve ficar dentro de um TEXTAREA para poder ficar visível na tela.

Obrigado Murilo.

#5

Vocês que sabem mexer com esse tipo de departamento poderiam me ajudar em algo por gentileza ? Pois bem… quando um determinado site envia um código de 3 dígitos para um celular através do código fonte da página eu estava conseguindo visualizar, porém houveram algumas alterações nesse site e agora não consigo mais achar o código dentro da página. Algum de vocês podem me ajudar com isso por favor ?

#6

Vocês que sabem mexer com esse tipo de departamento poderiam me ajudar em algo por gentileza ? Pois bem… quando um determinado site envia um código de 3 dígitos para um celular através do código fonte da página eu estava conseguindo visualizar, porém houveram algumas alterações nesse site e agora não consigo mais achar o código dentro da página. Algum de vocês podem me ajudar com isso por favor ??