Neste artigo você vai aprender em detalhes como obter a página pai do iframe em JavaScript, vem conferir o artigo!
Fala programador(a), beleza? Bora aprender mais sobre iframe e JavaScript!
Obter a página pai do iframe é uma tarefa comum em desenvolvimento web, especialmente quando se trabalha com conteúdo incorporado em uma página da web. A partir de um iframe, é possível obter informações sobre a página pai, como o URL e o título. Neste artigo, vamos explorar diferentes maneiras de obter a página pai do iframe usando JavaScript.
O que é um iframe?
Antes de entrarmos no detalhe de como obter a página pai do iframe, é importante entender o que é um iframe.
Iframe é um elemento HTML que permite a incorporação de conteúdo de outra página da web dentro de uma página da web.
Por exemplo, um site de notícias pode incorporar um vídeo do YouTube em uma de suas páginas usando um iframe.
O conteúdo dentro do iframe é exibido em uma janela separada dentro da página da web que o incorpora.
Como obter a página pai do iframe?
Há várias maneiras de obter a página pai do iframe usando JavaScript. Aqui estão algumas opções:
window.parent
Uma maneira simples de obter a página pai do iframe é usar a propriedade window.parent. Esta propriedade retorna a janela do pai que contém o iframe. Por exemplo:
var parentWindow = window.parent;
Com a variável parentWindow, é possível acessar as propriedades da página pai, como o URL e o título.
top
Outra maneira de obter a página pai do iframe é usando a propriedade top. Esta propriedade retorna a janela superior que contém o iframe. Por exemplo:
var parentWindow = top;
Da mesma forma que com a propriedade window.parent, a variável parentWindow permite acessar as propriedades da página pai.
window.opener
Se o iframe for aberto por meio de window.open(), a propriedade window.opener pode ser usada para obter a janela que abriu o iframe. Por exemplo:
var parentWindow = window.opener;
Com a variável parentWindow, é possível acessar as propriedades da página pai.
document.referrer
A propriedade document.referrer retorna o URL da página que levou o usuário à página atual. Isso pode ser usado para pegar o URL da página pai do iframe. Por exemplo:
var parentUrl = document.referrer;
No entanto, é importante observar que a propriedade document.referrer só funciona se a página pai tiver levado o usuário à página atual.
Se o usuário acessar a página diretamente, a propriedade não retornará nada.
postMessage
Outra maneira de resgatar informações da página pai do iframe é usando a API postMessage do JavaScript.
A API postMessage permite que as páginas da web se comuniquem entre si, independentemente da sua origem.
Para usar a API postMessage, é necessário adicionar um ouvinte de evento no iframe e enviar uma mensagem da página pai.
No iframe, adicione o seguinte código para ouvir mensagens da página pai:
window.addEventListener("message", function(event) {
if (event.data === "parentInfo") {
var parentWindow = event.source;
// Faça algo com a variável parentWindow
}
});
Na página pai, envie uma mensagem para o iframe:
var iframe = document.getElementById("myIframe");
iframe.contentWindow.postMessage("parentInfo", "*");
O segundo parâmetro do método postMessage especifica o URL do destino, que é definido como “*” para permitir que o iframe receba mensagens de qualquer origem.
Quando o iframe recebe a mensagem “parentInfo”, o ouvinte de evento é acionado e a variável parentWindow é definida como a janela da página pai.
Com a variável parentWindow, é possível acessar as propriedades da página pai.
Usando a API postMessage, é possível não apenas pegar informações da página pai do iframe, mas também enviar informações do iframe para a página pai.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Obter a página pai do iframe é uma tarefa importante em desenvolvimento web.
Usando JavaScript, é possível acessar informações da página pai, como o URL e o título, usando as propriedades window.parent, top e window.opener, bem como a propriedade document.referrer.
Além disso, a API postMessage permite que as páginas da web se comuniquem entre si, permitindo que o iframe obtenha informações da página pai e envie informações para a página pai.
Com essas ferramentas, é possível criar uma experiência integrada e personalizada para o usuário em uma página da web que incorpora conteúdo em um iframe.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!