Foros del Web » Programando para Internet » Javascript »

Acceso a objeto dentro iframe desde afuera

Estas en el tema de Acceso a objeto dentro iframe desde afuera en el foro de Javascript en Foros del Web. Hola Quisiera saber cómo acceder desde afuera, a un objeto HTML (Ej. una tabla) dentro de un iframe, a fin de cambiar uno de sus ...
  #1 (permalink)  
Antiguo 20/11/2010, 05:34
 
Fecha de Ingreso: octubre-2007
Mensajes: 267
Antigüedad: 16 años, 6 meses
Puntos: 1
Acceso a objeto dentro iframe desde afuera

Hola

Quisiera saber cómo acceder desde afuera, a un objeto HTML (Ej. una tabla) dentro de un iframe, a fin de cambiar uno de sus atributos (Ej. un estilo que hace que se oculte/desoculte).

Gracias de antemano.
  #2 (permalink)  
Antiguo 20/11/2010, 06:05
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 11 meses
Puntos: 1012
Respuesta: Acceso a objeto dentro iframe desde afuera

este tema se ha tratado en este foro en bastantes ocasiones. usa el buscador y encontrarás decenas de referencias
  #3 (permalink)  
Antiguo 20/11/2010, 06:50
 
Fecha de Ingreso: octubre-2007
Mensajes: 267
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: Acceso a objeto dentro iframe desde afuera

Bueno, igual gracias!
  #4 (permalink)  
Antiguo 20/11/2010, 07:20
 
Fecha de Ingreso: octubre-2007
Mensajes: 267
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: Acceso a objeto dentro iframe desde afuera

Perdón pero no encuentro la manera de buscarlo, alguien me puede ayudar por favor? Gracias de antemano!!
  #5 (permalink)  
Antiguo 20/11/2010, 07:45
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Acceso a objeto dentro iframe desde afuera

Si el iframe está dentro de tu dominio podrás acceder sin problemas, si no, no.
Lo más sencillo es que le agregues un atributo id a tu tabla dentro del iframe (en este ejemplo, tablita es el id):
Código PHP:
<table id="tablita" width="425" border="0" cellspacing="0" cellpadding="0">
  <
tr>
    <
td>&nbsp;</td>
    <
td>&nbsp;</td>
  </
tr>
  <
tr>
    <
td>&nbsp;</td>
    <
td>&nbsp;</td>
  </
tr>
</
table
Luego, el secreto es crear una referencia al objeto document de tu iframe. Supongamos que tu iframe tenga un atributo id de valor ifr, como el de este ejemplo:
Código PHP:
<iframe src="bla.html" id="ifr" width="600" height="150"></iframe
Eso quiere decir que a tu iframe podés referenciarlo de esta manera en la página que lo contiene:
Código PHP:
document.getElementById('ifr'); 
Sólo te falta referenciar el objeto document de ese iframe. Eso podrías hacerlo de esta manera para que funcione en navegadores antiguos y modernos:
Código PHP:
var doc=document.getElementById('ifr').contentDocument || document.getElementById('ifr').contentWindow.document 
Y una vez que tenés la referencia al document del iframe, podés usar el método getElementById para referenciar la tabla que tiene dentro:
Código PHP:
var tabla=doc.getElementById('tablita'); 
Un ejemplo completo:
archivo bla.html (que es el source del iframe):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin t&#237;tulo</title>
</head>

<
body>
<
table id="tablita" width="425" border="0" cellspacing="0" cellpadding="0">
  <
tr>
    <
td>&nbsp;</td>
    <
td>&nbsp;</td>
  </
tr>
  <
tr>
    <
td>&nbsp;</td>
    <
td>&nbsp;</td>
  </
tr>
</
table>
</
body>
</
html
Archivo Principal (es el que aloja al iframe):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin t&#237;tulo</title>
<style>
#bt{ width:100px; height:30px; line-height:30px; background:#900; color:#FFF; text-align:center; margin-top:10px; cursor:pointer}
</style>
<
script>
function 
cambiar(){
    var 
doc=document.getElementById('ifr').contentDocument || document.getElementById('ifr').contentWindow.document;
    var 
tabla=doc.getElementById('tablita');
    
tabla.style.background='red';
}
onload=function(){
    
document.getElementById('bt').onclick=cambiar;    
}
</script>
</head>

<body>
<iframe src="bla.html" id="ifr" width="600" height="150"></iframe>
<br />
<div id="bt">cambiar</div>
</body>
</html> 
  #6 (permalink)  
Antiguo 20/11/2010, 11:08
 
Fecha de Ingreso: octubre-2007
Mensajes: 267
Antigüedad: 16 años, 6 meses
Puntos: 1
Respuesta: Acceso a objeto dentro iframe desde afuera

Espectacular!!!

Mil gracias

Etiquetas: iframe, objeto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:21.