0 Compartilhamentos 551 Views 1 Comments

Interação entre iframe e documento principal

24 de fevereiro de 2014

Não tem ninguém que trabalhe com HTML e não emita um grito de horror ao se lembrar dos famigerados <frames>. Felizmente, essa aberração da natureza onde um documento pode ser composto por mais de um arquivo ao mesmo tempo agora é coisa do passado. Ou será que não?

O iframe é o sucessor direto do frame, permitindo também inserir o conteúdo de outro documento dentro de uma determinada página. Embora seja uma insensatez utilizar <iframes> da mesma forma que os <frames> do passado, eles ainda encontram casos particulares de uso como janelas modais e banners.

O iframe e a página principal são arquivos separados no servidor, com <html> e <body> separados e até mesmo CSS diferente se for necessário. Mas, o que fazer quando se precisa que dados sejam passados de um para o outro? Sem utilizar linguagem de servidor? Usando o seletor certo no Javascript, isso não é complicado.

Da página principal para o iframe:

Utilize o seletor parent.document. Por exemplo:

Do iframe para a página principal:

Desta vez, é preciso um pouco mais de malabarismo. Primeiro, você precisará identificar o iframe pelo seu id:

Depois, você precisará especificar seu conteúdo. E aí temos um pequeno obstáculo: incompatibilidade de navegadores. Logo, precisaremos de dois métodos diferentes para o mesmo propósito, separados por um || (“ou”):

Infelizmente, a propriedade contentDocument não funciona com IE, então utilizamos a propriedade contentWindow.document como alternativa.

Para finalizar e acessar os elementos dentro do iframe, combinamos o que foi especificado anteriormente. Repetimos o começo, para maior clareza:

Lembrando que, por questões de segurança, um iframe não pode acessar os elementos de um documento principal, a menos que ambos residam debaixo do mesmo domínio e vice-versa. No caso do Google Chrome, a limitação afeta também arquivos hospedados localmente, dando a impressão de que o iframe não consegue ler o documento pai, ainda que o código esteja sem erros.

Carregando...

Você pode se interessar

Como reduzir o ruido de fundo no microfone com aprendizado de máquina
Dicas
4 visualizações
Dicas
4 visualizações

Como reduzir o ruido de fundo no microfone com aprendizado de máquina

Carlos L. A. da Silva - 27 de outubro de 2020

Krisp é uma ferramenta gratuita que emprega algoritmos de Inteligência Artificial para identificar ruídos em tempo real.

Composer 2.0 está entre nós!
Artigos
7 visualizações
Artigos
7 visualizações

Composer 2.0 está entre nós!

Carlos L. A. da Silva - 26 de outubro de 2020

O melhor gerenciador de pacotes PHP atinge a maturidade com nova versão. Confira o que muda e como atualizar.

Promoções de Jogos do Final de Semana (23/10)
Notícias
17 visualizações
Notícias
17 visualizações

Promoções de Jogos do Final de Semana (23/10)

Carlos L. A. da Silva - 23 de outubro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

One Response

Deixe um Comentário

Your email address will not be published.

Mais publicações

Você precisa conhecer YAML
Artigos
17 visualizações
17 visualizações

Você precisa conhecer YAML

Carlos L. A. da Silva - 20 de outubro de 2020
Promoções de Jogos do Final de Semana (16/10)
Notícias
26 visualizações
26 visualizações

Promoções de Jogos do Final de Semana (16/10)

Carlos L. A. da Silva - 16 de outubro de 2020
Os 7 piores erros de Excel da História
Artigos
28 visualizações
28 visualizações

Os 7 piores erros de Excel da História

Carlos L. A. da Silva - 15 de outubro de 2020
Como aprender JavaScript de graça com a Microsoft
Dicas
27 visualizações
27 visualizações

Como aprender JavaScript de graça com a Microsoft

Carlos L. A. da Silva - 14 de outubro de 2020