6

Porque não funciona .contents()?
Como pegar um elemento dentro de um iframe como no exemplo da jQuery API

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>

<script>
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>

</body>
</html>

7 Respostas 7

4

De fato, não é possivel trabalhar o conteúdo de um iframe que esteja em um dominio diferente da pagina que o renderizou. Porém, para solucionar esse problema de troca de mensagens, existe o jquery-postmessage-plugin (http://benalman.com/projects/jquery-postmessage-plugin/), dependendo da sua necessidade ele pode ser utilizado.

Ele é citado em varios exemplos na internet para resolver problemas do tipo que você citou.

7
  • Valeu amigo, na verdade preciso inserir uma classe em uma div que esta dentro do iframe. Inclusive o domínio do iframe é o mesmo. Porem não esta funcionando como falei acima. Commented 29/01/2014 às 22:31
  • @WeslleyOliveira O console do navegador está mostrando algma mensagem de erro? Ou está apenas "falhando silenciosamente"? E em qual navegador você está testando?
    – mgibsonbr
    Commented 29/01/2014 às 22:32
  • 1
    @mgibsonbr Então estou trabalhando dentro do ambiente c9.io, e usando o chrome de navegador, mais não da nenhum erro. "falhando silenciosamente". Commented 29/01/2014 às 22:36
  • @WeslleyOliveira É, a princípio era pra estar funcionando... Sugiro tentar isolar mais o erro: experimenta fazer console.log em: a) $( "#frameDemo" ); b) $( "#frameDemo" ).contents().find( "a" ) antes de chamar o css; c) depois de chamar. Edite sua resposta com esses detalhes.
    – mgibsonbr
    Commented 29/01/2014 às 22:44
  • 1
    Seu problema pode estar no c9.io, ja realizou testes no seu navegador diretamente ? Commented 29/01/2014 às 22:44
2

Como já disseram você não pode acessar o conteúdo de um frame ou iframe de outro domínio via Javascript por questões de segurança.

O exemplo que você colocou no Plunker não funcionou porque o domínio onde o código é executado é run.plnkr.co, sendo que a URL do iframe é plnkr.co. Ou seja, mesmo subdomínios são considerados domínios diferentes.

Fiz um fork funcional do seu Plunker criando um HTML no mesmo diretório e colocando-o no iframe.

Note ainda que usei o evento load() para aguardar o carregamento da página o iframe.

1

Você até consegue efetuar uma troca de mensagens entre a página pai e o iframe. Só que, para isto, você precisa ter acesso ao código fonte do iframe. Se você tem este acesso, tenho alguns exemplos que podem te ajudar (precisei fazer isso várias vezes). Caso não tenha, por questões de segurança você realmente não vai conseguir.

0

Você só pode manipular iframes que estão no mesmo domínio, ou alterando os headers do iframe pelo servidor.

0

Você não pode buscar dados de domínios externos usando jquery. Experimente a biblioteca curl do PHP.

0

Você pode manipular dessa forma:

jQuery(“.iframeMain”, window.parent.document)

confira o site com o exemplo

0

O acesso a iframes e frames só é possível quando o domínio por inteiro é igual (isto incluí subdomínio e porta). Caso um desses seja diferente seu browser vai ignorar qualquer acesso ao DOM do alvo, considerando uma falha de segurança.

É possível comunicar usando o window.postMessage descrito no HTML5, porém browsers mais antigos não suportam tal recurso.

Você pode ler mais em https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage que também contém uma referencia para os browsers que suportam o recurso e suas limitações.

Uma observação sobre o seu código é que ele também pode estar sendo executado antes do DOM do seu iframe ser renderizado. O iframe tem carregamento assincronomo em relação ao window em que está, então para garantir que o elemento exista no seu frame, aguarde pelo evento load do iframe para fazer a busca no DOM. (lembrando que os domínios tem que ser idênticos)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .