0 Compartilhamentos 469 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

Promoções de Jogos do Final de Semana (03/07)
Notícias
12 visualizações
Notícias
12 visualizações

Promoções de Jogos do Final de Semana (03/07)

Carlos L. A. da Silva - 3 de julho de 2020

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

Como plugar um dispositivo USB corretamente… de primeira!
Dicas
13 visualizações
Dicas
13 visualizações

Como plugar um dispositivo USB corretamente… de primeira!

Carlos L. A. da Silva - 3 de julho de 2020

Impossível? Feitiçaria? A resposta estava bem diante de nossos olhos todo esse tempo...

Microsoft está mapeando o planeta inteiro para simulador de voo
Artigos
18 visualizações
Artigos
18 visualizações

Microsoft está mapeando o planeta inteiro para simulador de voo

Carlos L. A. da Silva - 1 de julho de 2020

A franquia Flight Simulator está prestes a renascer com um nível de realismo jamais alcançado antes.

One Response

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (26/06)
Notícias
19 visualizações
19 visualizações

Promoções de Jogos do Final de Semana (26/06)

Carlos L. A. da Silva - 26 de junho de 2020
Os 10 melhores plugins de formulário para WordPress em 2020
Artigos
21 visualizações
21 visualizações

Os 10 melhores plugins de formulário para WordPress em 2020

Carlos L. A. da Silva - 26 de junho de 2020
Você precisa conhecer Deno
Artigos
24 visualizações
24 visualizações

Você precisa conhecer Deno

Carlos L. A. da Silva - 20 de junho de 2020
Promoções de Jogos do Final de Semana (19/06)
Notícias
24 visualizações
24 visualizações

Promoções de Jogos do Final de Semana (19/06)

Carlos L. A. da Silva - 19 de junho de 2020