Como obter o conteúdo do corpo de um iframe em Javascript?

154

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

O que eu quero é:

test<br/>

javascript html iframe

— AMD
fonte

52

Nota importante: você não pode acessar o conteúdo de um iFrame se for entre domínios. Consulte a política de mesma origem .

— HellaMad

154

A pergunta exata é como fazê-lo com JavaScript puro e não com jQuery.

Mas eu sempre uso a solução que pode ser encontrada no código-fonte do jQuery. É apenas uma linha de JavaScript nativo.

Para mim é o melhor fácil leitura e até mesmo, afaik o caminho mais curto para obter o conteúdo iframe.

Primeiro obtenha seu iframe

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

E então use a solução do jQuery

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Ele funciona mesmo no Internet Explorer, que faz esse truque durante a contentWindowpropriedade do iframeobjeto. A maioria dos outros navegadores usa a contentDocumentpropriedade e esse é o motivo pelo qual testamos essa propriedade primeiro nesta condição OR. Se não estiver definido, tente contentWindow.document.

Selecionar elementos no iframe

Em seguida, você pode usar getElementById()ou até mesmo querySelectorAll()selecionar o elemento DOM entre iframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

Chamar funções no iframe

Obtenha apenas o windowelemento de iframepara chamar algumas funções globais, variáveis ou bibliotecas inteiras (por exemplo jQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Nota

Tudo isso é possível se você observar a política de mesma origem .

— algorítmico
fonte

2

iframe é indefinido aqui, ou você deve escrever código completo ou não deve escrever jQuery com ele

— Tarun Gupta

13

desculpe-me, mas a linha de código é um trecho do código jquery e o bloco de código é meu próprio código de exemplo. O resto alguém deveria sair. a única coisa que está faltando é a variável iframe. E não posso saber onde está o seu iframe ou como está o ID dele.

— algorhythm

5

Você poderia adicionar um aviso na parte superior da resposta de que isso não funciona se o iframe tiver um src remoto? Se estiver errado, agradeceria se você pudesse me indicar como ainda posso obter o conteúdo do iframe sem enviar outra solicitação HTTP (não é possível porque eu preciso que o javascript seja executado para construir o conteúdo do iframe e não quero implantar um segundo ambiente javascript, se evitável).

— Zackline 25/01/16

1

Eu tenho esse aviso. Mas no final da minha explicação. Você deve observar a política de mesma origem. Isso é tudo.

— algorritmo

2

Para que o trabalho acima funcione, eu tive que incluí-lo no document.querySelector('#id_description_iframe').onload = function() {... Espero que ajude alguém.

— user3442612

71

Usando o JQuery, tente o seguinte:

$("#id_description_iframe").contents().find("body").html()

— Michael Adedayo
fonte

27

Não funciona porque os "Domínios, protocolos e portas devem corresponder". : JavaScript inseguro tenta acessar o quadro com o URL

— Ionică Bizău

2

Como mencionado, funcionaria se os domínios corresponderem. Para sua informação, acabei de descobrir que $ ("# id_description_iframe #id_of_iframe_body"). Html () funciona no Chrome, mas não em todas as versões do Firefox e, portanto, o uso acima é bom. ... Ou seja, $ ( "# id_description_iframe #id_of_iframe_body") conteúdos () encontrar ( "body") html () operavam em ambos

— hobailey

41

Funciona perfeitamente para mim :

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

— bizzr3
fonte

3

É estranho, mas para mim .bodynão funciona. No entanto .getElementsByTagName('body')[0]faz.

— Jenny O'Reilly

não é ".body", apenas "body". remova o ponto

— Arjun

1

essa deve ser a resposta se você estiver usando o vanilla javascript.

— Jovanni G

23

AFAIK, um Iframe não pode ser usado dessa maneira. Você precisa apontar seu atributo src para outra página.

Veja como obter seu conteúdo corporal usando javascript antigo de avião. Isso funciona com o IE e o Firefox.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

— Jose Basilio
fonte

1

faz no safari (ou seja, filial) #

— Andrei Cristian Prodan

com problema de domínio cruzado, impediu que um quadro com origem " someOther.com " acesse um quadro de origem cruzada.

— lannyf

10

use contentno iframe com JS:

document.getElementById('id_iframe').contentWindow.document.write('content');

— CoursesWeb
fonte

5

Eu acho que colocar texto entre as tags é reservado para navegadores que não conseguem lidar com iframes, ou seja ..

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Você usa o atributo 'src' para definir a origem dos iframes html ...

Espero que ajude :)

3

O código a seguir é compatível com vários navegadores. Funciona no IE7, IE8, Fx 3, Safari e Chrome, portanto, não há necessidade de lidar com problemas entre navegadores. Não testou no IE6.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

— nekno
fonte

O html abaixo funcionou para mim no Chrome 7 no Mac. Testei esta postagem original no Chrome 6 no Windows e funcionou bem. <html> <head> </head> <body> <iframe id = "iframeId" name = "iframeId"> ... </iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> testing </h1>"; } </script> </body> </html>

— nekno 30/10/10

1

window.frames.iframeId.documenté indefinido para mim. (Ubuntu 13.04, Chrome)

— Ionică Bizău

2

Chalkey está correto, você precisa usar o atributo src para especificar a página a ser contida no iframe. Desde que você faça isso, e o documento no iframe esteja no mesmo domínio que o documento pai, você pode usar o seguinte:

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

Obviamente, você pode fazer algo útil com o conteúdo, em vez de colocá-lo em alerta.

— Graham Clark
fonte

1

Para obter o conteúdo do corpo do javascript, tentei o seguinte código:

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

onde "id_description_iframe" é o ID do seu iframe. Este código está funcionando bem para mim.

— sunakshi
fonte

2

Coloque sua resposta sempre em contexto, em vez de apenas colar o código. Veja aqui para mais detalhes.

— gehbiszumeis 16/01

1

As respostas somente de código são consideradas de baixa qualidade: forneça uma explicação sobre o que seu código faz e como ele resolve o problema. Isso ajudará os solicitantes e os futuros leitores, se você puder adicionar mais informações em sua postagem. Consulte também Explicando respostas inteiramente baseadas em código: meta.stackexchange.com/questions/114762/…

— borchvm