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.
