1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.
  2. Informação: Pela 0:30 desta Sexta-feira (9 de Dezembro, 23:30 de Quinta-feira nos Açores) o Fórum e restantes sites da ZWAME vão estar offline para manutenção durante cerca de 1h30.
    Se necessário faremos actualizações via Twitter e Facebook.
    Remover anúncio

Obter conteúdo de Iframe/carregar ficheiros no JavaScript

Discussão em 'Web Development' iniciada por pedroac, 26 de Outubro de 2007. (Respostas: 2; Visualizações: 2869)

  1. Preciso que ao escolher umas opções numa página seja carregado um ficheiro (sem mudar de página; ou seja, em JavaScript - em PHP é fácil mas não é o que quero) e coloque o seu conteúdo num "textarea".

    Pensei em usar um "iframe" invisível. Defino o seu "src" e depois copio o conteúdo do "body" no "textarea". Mas o "innerHTML" está sempre vazio, em vez de ter o conteúdo carregado do "src".

    Não é possível obter o conteúdo do "iframe" carregado pelo "src"?
    Se não é possível, como posso resolver o problema, de preferência uma solução portável.

    Abraços e obrigado
     
  2. p3dro

    p3dro Power Member

    vê se isto te ajuda em alguma coisa:

    Código:
    <html>
    <head>
    <script type="text/javascript">
    function SetIFrameContent(iFrm, txtArea){
      var iFrmDocument=document.getElementById(iFrm).contentWindow.document;
      var field=document.getElementById(txtArea);
    
      field.value=iFrmDocument.getElementsByTagName("body")[0].innerHTML;
    }
    </script>
    
    </head>
    <body>
    <input type="button" onclick="SetIFrameContent('iFrm','txtArea')" value="Copiar Conteúdo iFrame">
    <iframe src="mywebpage.htm" style="display:none;" id="iFrm"></iframe>
    <textarea cols="90" rows="15" id="txtArea">(o conteúdo iframe fica aqui...)</textarea>
    </body>
    </html>
     
  3. Obrigado p3dro, mas o problema não está na atribuição do valor da iframe, mas em colocar conteúdos de ficheiros, dinâmicamente, num textarea (o iframe era só um artifício). E resolvi o problema; exponho a solução:

    1) o conteúdo do iframe, que é atribuido através do atributo src dinâmicamente, vai ser copiado para o textarea (t1);
    2) os ficheiros com os conteúdos no textarea estão no formato txt, mas o iFrame não consegue-os visualizar:
    a) fiz um ficheiro em PHP (p) que obtém um identificador do ficheiro, por $_GET, abre-o e gera um ficheiro HTML, com um textarea (t2) onde é colocado o conteúdo do ficheiro;
    3) quando foram seleccionadas as opções para preencherem o conteúdo de t1, o src do iframe é alterado, usando o ficheiro p
    a) é feita uma função, que é chamada nessas condições, e que atribui o valor de src do iframe
    4) Infelizmente, se nessa mesma função a seguir obter o conteúdo de t2 no iframe e copiá-lo para t1, os valores não são actualizados correctamente
    a) fiz uma função que é chamada quando a iframe é carregada (com o evento onload)
    b) essa função obtém t1, obtém t2 e copia o conteúdo de t2 para t1
    5) a iframe está invisível (é apenas um artifício para carregar ficheiros de modo portável e facilmente)

    O código parcial:
    Código:
    <iframe onload="[B]iframe_onload()[/B]"
                style="display: none"
                src="../caracteristicas/print.php?args=base" id="caracteristicas_iframe">
    </iframe>
    <script type="text/javascript">
    <!--
    function [B]update_caracteristicas[/B](tipologia, natureza)
    {
        var tipologia_id = tipologia.options[tipologia.selectedIndex].value;
        var natureza_id  = natureza.options[natureza.selectedIndex].value;
        if( tipologia_id == 0 || natureza_id == 0 )
        {
            var args = 'base';
        }
        else
        {
            var args = tipologia_id + '-' + natureza_id;
        }
    
        var path = '../caracteristicas/print.[B]php[/B]?args=' + args;
    
        var caracteristicas_iframe = document.getElementById('caracteristicas_iframe');
        caracteristicas_iframe.[B]src[/B] = path;
    }
    
    function [B]iframe_onload()[/B]
    {
        var caracteristicas = document.getElementById('caracteristicas');
        var caracteristicas_iframe = document.getElementById('caracteristicas_iframe');
    
        [B]var oDoc = caracteristicas_iframe.contentWindow ||
                   caracteristicas_iframe.contentDocument;
        if (oDoc.document)
        {
            oDoc = oDoc.document;
        }
        var val = oDoc.getElementById('caracteristicas');
    [/B]
        if( val.value )
        {
            caracteristicas.[B]value[/B] = val.[B]value[/B];
        }
    }
    -->
    </script>
    Código:
    <select name="tipologia_id"
               [B]onchange="update_caracteristicas(this, natureza_id)[/B]"
    >
    
    etc.

    A parte onde está oDoc foi usado de uma dica de um site (infelizmente esqueci-me do endereço :-( mas também vejo muitos a usarem um código semelhante).

    Obrigado na mesma :-)
    Pelo menos fica aqui uma dica para quem quiser ler ficheiros, e colocar os seus conteúdos em elementos HTML, com a ajuda de JavaScript, PHP e CSS.
     

Partilhar esta Página