Obter elemento de dentro de um iFrame

244

Como você obtém um <div>de dentro de um <iframe>?

joepour
fonte

Respostas:

382
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

Você poderia simplesmente escrever:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

e o primeiro documento interno válido será retornado.

Depois de obter o documento interno, você pode acessar seus internos da mesma maneira que acessaria qualquer elemento em sua página atual. ( innerDoc.getElementById... etc)

IMPORTANTE: verifique se o iframe está no mesmo domínio, caso contrário você não poderá obter acesso aos seus internos. Isso seria script entre sites.

geowa4
fonte
4
Ótima resposta. Você sabia que pode fazer: var innerDoc = iframe.contentDocument || iframe.contentWindow.document; // mais legível e significa o mesmo
David Snabel-Caunt
5
Já vi pessoas confusas com isso mais do que operadores ternários. Eles parecem não saber que o primeiro válido é retornado.
geowa4
5
Na verdade, como eu editei a resposta para incluí-lo, o cara por cima do meu ombro me perguntou o que fez ...
geowa4
12
Provavelmente melhor para educar do que o uso de código mais complexo para a simplicidade :)
David Snabel-Caunt
1
@JellicleCat: Qualquer maneira de contornar isso é uma maneira de fazer "Cross-site request forgery", também conhecido como ataque de "one-click" ou "equitação sessão"
CSharper
12

Não se esqueça de acessar o iframe após o carregamento . Maneira antiga, mas confiável, sem jQuery:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>
lukyer
fonte
3
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() é função dentro da página e essa ação ação nela

VishalDream
fonte
5
Isso está chamando uma função de um iFrame, não obtendo uma referência ao elemento.
Nick Mitchell
3

As respostas acima deram boas soluções usando Javscript. Aqui está uma solução simples do jQuery:

$('#iframeId').contents().find('div')

O truque aqui é o .contents()método do jQuery , ao contrário.children() que só pode obter elementos HTML, .contents()pode obter nós de texto e elementos HTML. É por isso que é possível obter o conteúdo do documento de um iframe usando-o.

Outras leituras sobre o jQuery .contents(): .contents ()

Observe que o iframe e a página precisam estar no mesmo domínio.

SkuraZZ
fonte
1

Nenhuma das outras respostas estava funcionando para mim. Acabei criando uma função dentro do meu iframe que retorna o objeto que estava procurando:

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

Então você chama essa função assim para recuperar o elemento:

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();
guindaste
fonte
0

Se o iframe não estiver no mesmo domínio, de modo que você não possa obter acesso a seus internos a partir do pai, mas poderá modificar o código-fonte do iframe, poderá modificar a página exibida pelo iframe para enviar mensagens para a janela pai, o que permite você compartilhar informações entre as páginas. Algumas fontes:

Jose V
fonte
-3

O código abaixo o ajudará a descobrir dados iframe.

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
nagato cinza
fonte