frames y javascript

oscard41 · #1 (**permalink**) 12/06/2013, 23:13

Buenas madrugadas a todos,

hace unos días se me ocurrió hacer unas pruebas para tratar de acceder a los objetos DOM de los frames y resulta que ningún código que e probado me funciona...

probe con estos codigos para tratar de acceder al id de un button y registrar un evento click en el cual me iba a dar un alert() diciendo que de que el botton fue presionado..

Código Javascript:

Ver originalwindow.parent.frames['nombre de frame'].document.getElementById("nomID");
window.parent.frames[0].document.getElementById("nomID");
 
window.frames["nombre"].document.getElementById("nomID");
window.self.frames["nombre"].document.getElementById("nomID");
window.top.frames["nombre"].document.getElementById("nomID");

esos fueron los codigos que probe los puse tanto en frame1 como en frame2 que son el nombre de los dos frames con los que estoy haciendo la prueba...
tambien copie cada uno de esos codigos en la pagina index.html que contiene los frame y tampoco me funciono... :S

de que manera se puede acceder a los id de los objetos de los frames??

a los que me puedan ayudar con esta preguntas se los agradezco de ante mano

quimfv · #2 (**permalink**) 13/06/2013, 03:06

Te aconsejaria que no pierdas el tiempo con frames.... ajax y divs permiten cosas mucho mejores.

Pero te paso un ejemplo

index.htm

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<script language="JavaScript" type="text/JavaScript">
function copiaTexto(){
    frames['mainFrame'].document.getElementById("retexto").innerHTML=frames['leftFrame'].document.getElementById("texto").innerHTML;
}
</script>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="200,*" frameborder="NO" border="0" framespacing="0">
  <frame src="frame1.htm" name="leftFrame" id="leftFrame" scrolling="NO" noresize>
  <frame src="frame2.htm" name="mainFrame" id="mainFrame">
</frameset>
<noframes><body>
 
</body></noframes>
</html>

frame1.htm

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<span id="texto">Aquí dice algo</span>
</body>
</html>

frame2.htm

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<input name="botCopia" type="button" id="botCopia" value="Copia" onClick="parent.copiaTexto()">
<span id="retexto">Se copiará aquí</span>
</body>
</html>

chuidiang · #3 (**permalink**) 13/06/2013, 04:04

Hola:

Hay una restricción a tener en cuenta. Si el dominio de los frames (la url que muestran) es distinta, no puedes acceder de uno a otro. Para que funcione, los src de los frame deben pertenecer al mismo dominio y la página principal también.

Se bueno.

oscard41 · #4 (**permalink**) 13/06/2013, 07:00

Cita:

Iniciado por quimfv

Te aconsejaria que no pierdas el tiempo con frames.... ajax y divs permiten cosas mucho mejores.

Pero te paso un ejemplo

index.htm

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<script language="JavaScript" type="text/JavaScript">
function copiaTexto(){
    frames['mainFrame'].document.getElementById("retexto").innerHTML=frames['leftFrame'].document.getElementById("texto").innerHTML;
}
</script>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="200,*" frameborder="NO" border="0" framespacing="0">
  <frame src="frame1.htm" name="leftFrame" id="leftFrame" scrolling="NO" noresize>
  <frame src="frame2.htm" name="mainFrame" id="mainFrame">
</frameset>
<noframes><body>
 
</body></noframes>
</html>

frame1.htm

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<span id="texto">Aquí dice algo</span>
</body>
</html>

frame2.htm

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<input name="botCopia" type="button" id="botCopia" value="Copia" onClick="parent.copiaTexto()">
<span id="retexto">Se copiará aquí</span>
</body>
</html>

Gracias por tu respuesta...

los códigos los copie y los pegue tal cual y no me funcionaron... el texto no se copia lo probé en chrome y en mozilla, la consola de errores de mozilla me dice que la propiedad document es indefinida...

y si estoy consiente que con div y ajax se puedes hacer cosas mejores pero esta ves lo estaba haciendo con frames con la intencion de tener el conocimiento de acceder al DOM de los frames pero por lo que veo como que no se puede por que e probado la mayoría de los códigos que e visto en este foro y googleando pero ninguno funciona simplemente no puedo acceder ni siquiera a un ID de un frame

quimfv · #5 (**permalink**) 13/06/2013, 07:15

A mi me funciona??? Con FF y IE!!! Pero ahora veo que con Chrome no?!?!?

Chrome dice "

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

"

Habria que darle unas vueltas pero se puede hacer... siempre que los ficheros que se muestran en cada frame sean del mismo dominio como bien te ha dicho @chuidiang.

(Me ha funcionado incluso con el script fuera del head tal y como lo he puesto, eso no seria muy correcto claro)