Obtener elemento desde dentro de un iFrame
¿ Cómo se obtiene un <div>
desde dentro de un <iframe>
?
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
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>
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.
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