Obter conteúdo de Iframe/carregar ficheiros no JavaScript

pedroac · 26 de Outubro de 2007

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

p3dro · 26 de Outubro de 2007

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>

pedroac · 29 de Outubro de 2007

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.

Obter conteúdo de Iframe/carregar ficheiros no JavaScript

pedroac

Membro

p3dro

Power Member

pedroac

Membro