2011-10-20 30 views
5

Tengo un elemento como el que figura a continuación en el documento, podría obtener el elemento iframe por document.getElementById('iframe_id'), pero ¿cómo introducir el elemento dentro de este iframe? Intenté iframeElement.contentWindow, y el DOMWindow devuelto no tiene propiedades. También intenté iframeElement.docuemnt y iframeElement.contentDocument, ambos están indefinidos. ¿Cómo puedo obtenerlo? Estoy usando el último Chrome en mi experimento.Cómo obtener el elemento dentro de un elemento iframe en Javascript?

Aquí es el elemento iframe

<iframe id='iframe_id'> 
<html> 
<body>many content here</body> 
</html> 
</iframe> 
+2

son su página y la página dentro del iframe del mismo dominio? si no, Chrome probablemente no le dará acceso al otro DOM. – Tetaxa

+0

@Tetaxa, ¿cómo verificar el dominio para iframe? Es muy posible que provengan de diferentes dominios. – Thomson

+0

la primera parte de la url. si las páginas están en el mismo servidor, debería estar bien. – Tetaxa

Respuesta

5

Puede interrogar a sólo el contenido en un iframe si el contenido tiene el mismo número de protocolo, dominio y puerto como el guion que lo interroga Se llama SAME ORIGIN

Si ese es el caso, este código mostrará el contenido. Si no es así - no se puede acceder al iframe de un guión normal en una página HTML normal

Demo - probado en IE8, Chrome 13 y FX6

function showIframeContent(id) { 
    var iframe = document.getElementById(id); 
    try { 
     var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document; 
     alert(doc.body.innerHTML); 
    } 
    catch(e) { 
     alert(e.message); 
    } 
    return false; 
} 


<iframe id='iframe_id1' src="javascript:parent.somehtml()"> </iframe> 
<br/> 
<a href="#" onclick="return showIframeContent('iframe_id1')">Show</a> 
<hr/> 

<iframe id='iframe_id2' src="http://plungjan.name/"> </iframe> 
<br/> 
<a href="#" onclick="return showIframeContent('iframe_id2')">Show</a> 
<hr/> 
+0

El html de muestra anterior es solo un extracto (simplificado) de la ventana Elementos en la parte inferior de Chrome. Muestra que hay un html completo dentro del iframe. ¿Quieres decir que esto es falso en la interfaz de usuario? – Thomson

+0

Sí. De todos modos, si la página es del mismo servidor, entonces mi código funciona. Por favor, consulte la actualización sobre el mismo origen – mplungjan

+0

Todavía tengo 'doc' undefine, muy extraño. – Thomson

0

Usted debe ser capaz de acceder a él por document.getElementById('yourIFrame').document.getElementById('yourElement')

4

Tener:

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

Para obtener el documento de contenido que puede usar:

var contDoc = iframe.contentDocument || iframe.contentWindow.document; 

Luego puede buscar su elemento insid e el iframe por id.

+0

Supongo que debería funcionar. Pero tengo contDoc undefined después de ejecutar sus 2 declaraciones. El iframe devuelto parece ser el correcto. – Thomson

+1

@Thomson: Funcionará a menos que la fuente del iframe esté configurada en otro dominio. –

+0

Obtengo _Descubierta DOMException: bloqueó un marco con origen "http://example.com" al acceder a un marco de origen cruzado._ ¿Alguna pista? –

Cuestiones relacionadas