27.03.2025

Acessando o Conteúdo do Corpo em um Iframe via JavaScript

Resposta Rápida

Para acessar o conteúdo do corpo de um iframe, você pode usar JavaScript. Certifique-se de que tanto a página pai quanto o iframe estão no mesmo domínio. Uma vez que o iframe está completamente carregado, você pode usar o seguinte código para acessar seu conteúdo:

let iframeDocument = document.getElementById('seuIframeId').contentDocument;
let iframeContent = iframeDocument.body.innerHTML; // Obtendo o conteúdo que precisamos!

É importante lembrar que o iframe deve estar completamente carregado antes de acessá-lo:

document.getElementById('seuIframeId').onload = function() {
    let iframeContent = this.contentDocument.body.innerHTML; // Agora podemos trabalhar...
};

Selecionando Elementos Dentro do Iframe

Agora que temos acesso, podemos selecionar elementos dentro do iframe da seguinte forma:

let iframeDocument = document.getElementById('seuIframeId').contentDocument;
let soloElement = iframeDocument.getElementById('umAnel'); // Encontramos o "Um Anel"...
let groupElements = iframeDocument.querySelectorAll('.elesMeVeemRodando'); // E todos os outros elementos...

Se você estiver disposto a arriscar, pode acessar funções globais ou variáveis que estão no escopo global do iframe:

let iframeWindow = document.getElementById('seuIframeId').contentWindow;
let apenasEsperando = iframeWindow.umaFuncaoGlobal(); // A função global faz o seu trabalho...

Trabalhando com Diferentes Navegadores

Cada navegador tem suas peculiaridades. Para garantir compatibilidade ideal, siga estas orientações:

• Use iframe.contentDocument em navegadores modernos como Firefox.
• Use iframe.contentWindow.document para Internet Explorer.

A seguinte abordagem universal funciona em qualquer navegador:

let iframe = document.getElementById('seuIframeId');
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
let iframeBody = iframeDocument.body.innerHTML; // Agora interagimos com todos os navegadores.

Sem Iframe? Sem Problemas

Se o iframe não estiver visível, seu código não será afetado. Aqui está como lidar com essa situação:

let iframe = document.getElementById('seuIframeId');
if (iframe) {
    let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDocument) {
        let iframeContent = iframeDocument.body.innerHTML; // Acessamos o conteúdo do iframe!
        // Continue executando o código...
    }
}

Simplificando o Processo com jQuery

Se o jQuery estiver disponível na página ou dentro do iframe, a tarefa fica significativamente mais fácil:

let iframeContent = $("#seuIframeId").contents().find("body").html(); // Uma solução elegante usando jQuery!

Porém, certifique-se de que o jQuery de fato está incluído em seu projeto!

Visualização

<iframe>: [👀 O que está escondido além da moldura?]

Descubra todos os segredos ocultos além das bordas do iframe usando JavaScript:

var iframeWindow = document.querySelector('iframe').contentWindow;
var iframeBody = iframeWindow.document.body; // 👀🎉 E o mundo inteiro está à sua frente!

🖼️ Antes: Vemos apenas a moldura do iframe sem detalhes.  
🎉 Depois: O mundo inteiro está ao seu alcance, agora todas as informações estão acessíveis!

Ignorando a Política de Mesma Origem

A política de mesma origem age como um porteiro em todas as interações com iframes. Para acessar conteúdo de outro domínio, você deve seguir essas regras, caso contrário, o navegador irá barrar sua ideia: "Hoje não, meu amigo!"

Negócio Arriscado com Segurança: À Custa da Usabilidade

Você quer brincar com o conteúdo do iframe, colocando a segurança em risco? Cuidado extremo; violar a política de segurança do domínio pode levar a consequências desagradáveis. Antes de aceitar o desafio, assegure-se de entender todas as possíveis consequências!

Recursos Úteis

1. Política de Mesma Origem - Segurança Web | MDN — Aqui, você encontrará informações abrangentes sobre a política de mesma origem.
2. <iframe>: O Elemento Inline Frame - HTML | MDN — Um guia detalhado sobre como usar o elemento iframe.
3. Objetos IFrame do DOM HTML — Um tutorial que esclarece vários truques ao trabalhar com iframes.
4. SecurityError: Bloqueado um frame de acessar um frame cross-origin - Stack Overflow — Uma discussão sobre possíveis soluções para acessar o conteúdo do iframe de outros domínios.
5. GitHub - davidjbradshaw/iframe-resizer — Uma ferramenta para redimensionar automaticamente iframes com base em seu conteúdo.
6. contents() | Documentação da API jQuery — Uma visão geral do método contents() do jQuery, útil para gerenciar o conteúdo do iframe.
7. CodePen — Um ótimo lugar para experimentar o acesso ao conteúdo do iframe.

Video

Navigation