Pegar elemento de iframe com JavaScript

Neste artigo você vai aprender a como pegar elemento de iframe de forma simples, utilizando a linguagem JavaScript

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Para pegar um elemento de um iframe com JavaScript, primeiro é preciso selecionar o iframe. Isso pode ser feito de várias maneiras, mas uma das maneiras mais simples é usando o método getElementById:

var iframe = document.getElementById('iframeId');

Em seguida, você pode usar o método contentWindow para obter o objeto window do iframe:

var iframeWindow = iframe.contentWindow;

Agora, você pode usar o método document do objeto window para obter o objeto document do iframe:

var iframeDocument = iframeWindow.document;

Com o objeto document do iframe, você pode usar qualquer um dos métodos de seleção de elementos do JavaScript, como getElementById, getElementsByTagName, etc., para selecionar um elemento do iframe. Por exemplo:

var element = iframeDocument.getElementById('elementId');

Uma coisa a ter em mente é que o código acima só funcionará se o iframe e a página principal compartilharem o mesmo domínio.

Se o iframe estiver em um domínio diferente, o navegador bloqueará o acesso ao conteúdo do iframe por questões de segurança. Nesse caso, você precisará usar técnicas de “proxying” para contornar essa restrição.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Outras coisas que podemos fazer com o iframe:

Uma vez que você tenha selecionado o elemento desejado no iframe, você pode fazer qualquer coisa com ele que você faria com qualquer outro elemento em JavaScript.

Por exemplo, você pode alterar suas propriedades, adicionar ou remover classes, ou até mesmo remover o elemento do DOM completamente.

Aqui estão alguns exemplos de coisas que você pode fazer com um elemento do iframe:

// Alterar o conteúdo do elemento
element.innerHTML = 'Novo conteúdo';

// Alterar o atributo "src" de uma imagem
if (element.tagName === 'IMG') {
  element.src = 'nova-imagem.jpg';
}

// Adicionar uma classe ao elemento
element.classList.add('nova-classe');

// Remover o elemento do DOM
element.parentNode.removeChild(element);

É importante lembrar que, para fazer qualquer coisa com um elemento do iframe, você precisa ter acesso a ele primeiro.

Isso significa que você precisa selecioná-lo usando um dos métodos de seleção de elementos do JavaScript, como os mencionados acima.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Para concluir, pegar um elemento de um iframe com JavaScript é bastante simples, desde que você tenha acesso ao iframe e ao conteúdo dele.

Primeiro, é preciso selecionar o iframe usando um dos métodos de seleção de elementos do JavaScript, como getElementById.

Em seguida, é preciso obter o objeto window e o objeto document do iframe para ter acesso ao DOM do iframe.

Finalmente, é só usar os métodos de seleção de elementos do JavaScript para selecionar o elemento desejado e fazer o que quiser com ele.

No entanto, é importante lembrar que o código acima só funcionará se o iframe e a página principal compartilharem o mesmo domínio.

Se o iframe estiver em um domínio diferente, será necessário usar técnicas de “proxying” para contornar essa restrição.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Acessando propriedades do iframe: contentWindow, localStorage e mais:

Depois que tu tem o contentWindow do iframe em mãos, dá pra chegar em outras coisas além do document

Se o iframe é do MESMO domínio, tu alcança o localStorage, sessionStorage e as variáveis daquela página igual alcançaria as da página principal

var iframe = document.getElementById(‘iframeId’) var iframeWindow = iframe.contentWindow

// mesmo domínio: acesso liberado var token = iframeWindow.localStorage.getItem(‘token’) var itens = iframeWindow.document.getElementsByTagName(‘li’)

Agora se liga no detalhe que pega muita gente: isso SÓ vale quando a página de dentro e a de fora são do mesmo domínio

Se o iframe aponta pra outro domínio, o navegador barra na hora que tu tenta ler contentWindow.document ou contentWindow.localStorage, e solta um erro de segurança no console

Isso é a Same-Origin Policy trabalhando, e é de propósito (imagina se qualquer site abrisse um iframe do seu banco e lesse o token de dentro)

Iframe de outro domínio: como comunicar com postMessage:

Quando o iframe é de um domínio diferente, tu não lê o conteúdo dele direto, mas ainda dá pra CONVERSAR com ele

A forma correta e suportada pelos navegadores é o postMessage: a página de fora manda uma mensagem, a de dentro escuta e responde

// na página principal, enviando pro iframe var iframe = document.getElementById(‘iframeId’) iframe.contentWindow.postMessage(‘quero o dado’, ‘https://dominio-do-iframe.com’)

// dentro do iframe, escutando window.addEventListener(‘message’, function (event) { if (event.origin !== ‘https://dominio-de-fora.com’) return // responde só pra origem que tu confia event.source.postMessage(‘aqui esta o dado’, event.origin) })

Repara no event.origin: SEMPRE confira de quem veio a mensagem antes de responder, senão qualquer site conversa com o teu iframe

É mais trabalho que um getElementById, mas é o jeito que funciona entre domínios diferentes sem o navegador te barrar

Perguntas frequentes:

Como pegar o valor de um input dentro do iframe com JavaScript? Com o iframeDocument em mãos, seleciona o campo e lê o .value normalmente, tipo iframeDocument.getElementById(‘campo’).value, desde que o iframe seja do mesmo domínio

Por que dá erro ao acessar o iframe de outro site? É a Same-Origin Policy do navegador bloqueando por segurança, pra um site não ler o conteúdo de outro domínio carregado num iframe

Dá pra pegar o iframe sem id?

Preciso esperar o iframe carregar antes de acessar? Sim, se tu tentar ler o conteúdo antes dele carregar não acha nada, o seguro é rodar teu código dentro do evento iframe.onload