O Código
Para este tutorial, vamos precisar de dois ficheiros HTML: um ficheiro pai onde colocamos o iframe, e um ficheiro filho contendo o conteúdo do iframe.
child.html
O nosso ficheiro filho conterá um simples gerador de texto fictício, onde as pessoas podem clicar num botão para adicionar outro parágrafo do texto do lorem ipsum.
Como este tutorial é sobre o iframe, e não a funcionalidade do que está nele, sinta-se livre para copiar e colar o seguinte em child.html:
Você pode experimentar o código acima neste CodePen:
parent.html
Podemos agora inserir o nosso iframe em parent.html.
Adicionar o habitual código HTML5 da placa de caldeira, e depois inserir o seguinte entre as tags do corpo:
<iframe src="child.html" style="width:100%;border:none;"></iframe>
Mas aqui encontramos o nosso problema. Porque definimos overflow: hidden, os botões e metade do primeiro parágrafo desaparecem.
E se não tivéssemos definido overflow: hidden veríamos duas barras de rolagem, como na imagem acima. Para resolver isto, precisamos de enviar mensagens de child.html para a janela pai!
child.html
Então, de volta em child.html, precisamos de adicionar novos ouvintes de eventos à secção de scripts.
Precisamos notificar o elemento pai da altura do iframe:
- sempre que ele carregar,
- sempre que a janela for redimensionada, e
- sempre que um botão for pressionado.
Quando cada um desses eventos ocorre, vamos acionar uma função chamada sendPostMessage.
Põe o seguinte código imediatamente antes do fechamento <script> tag:
Agora vamos criar nossa sendPostMessage() function.
Queremos medir a altura do elemento com a id container. Se (e somente se) a altura mudar, queremos enviar uma mensagem chamada frameHeight para a janela pai, notificando-a da atualização.
O seguinte código deve ir acima do que acabamos de escrever:
O segundo argumento do método postMessage representa a origem do alvo: o nome da hostname da janela pai.
Isso é útil para a segurança, garantindo que a mensagem seja enviada apenas para domínios específicos, mas para fins de desenvolvimento, podemos definir a origem do alvo para '*'. Isto significa que qualquer janela pai receberá a mensagem.
Overall, o código de child.html deve ser parecido com isto:
parent.html
Let’s load parent.html no browser e abra a consola (pressione CTRL+Shift+ J no Google Chrome).
>Quando redimensionarmos a janela, devemos agora ver os valores aparecerem na consola. O passo final é usar estes para definir a altura do iframe sempre que um destes valores for enviado.
Precisamos ouvir os eventos das mensagens e sempre que recebermos uma devemos usá-la para definir a propriedade height do iframe (mais um pouco de forro):
Overall, o seu ficheiro parent.html deve ficar assim:
Se seguiu os passos correctamente, o seu iframe irá agora redimensionar automaticamente como se o seu conteúdo fizesse parte da janela principal!