Obtener elemento desde dentro de un iFrame

Resuelto joepour asked hace 15 años • 7 respuestas

¿ Cómo se obtiene un <div>desde dentro de un <iframe>?

joepour avatar Jul 07 '09 01:07 joepour
Aceptado
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

Podrías escribir más simplemente:

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

y se devolverá el primer documento interno válido.

Una vez que obtenga el documento interno, podrá acceder a sus partes internas de la misma manera que accedería a cualquier elemento de su página actual. ( innerDoc.getElementById...etc.)

IMPORTANTE: asegúrese de que el iframe esté en el mismo dominio; de lo contrario, no podrá acceder a sus componentes internos. Eso sería secuencias de comandos entre sitios. Referencia:

  • MDN: <iframe>secuencias de comandos
  • MDN: Política del mismo origen: acceso a la API de secuencias de comandos entre orígenes
geowa4 avatar Jul 06 '2009 18:07 geowa4

No olvide acceder al iframe después de cargarlo . Manera antigua pero confiable sin 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 avatar Mar 14 '2017 09:03 lukyer

Las respuestas anteriores dieron buenas soluciones usando Javscript. Aquí hay una solución jQuery simple:

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

.contents()El truco aquí es el método de jQuery , a diferencia .children()del cual solo puede obtener elementos HTML, .contents()puede obtener nodos de texto y elementos HTML. Es por eso que uno puede obtener el contenido del documento de un iframe usándolo.

Lecturas adicionales sobre jQuery .contents(): .contents()

Tenga en cuenta que el iframe y la página deben estar en el mismo dominio.

Lying_cat avatar Apr 19 '2018 07:04 Lying_cat
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction()es una función dentro de la página y esa función es una acción en ella

VishalDream avatar Sep 19 '2014 12:09 VishalDream